Bootstrap - 如何使单个 div 内容不响应？

Question

我正在学习如何基于引导程序构建网页，但我在尝试将两个元素并排放置在较小的屏幕上时遇到了一些麻烦。
特别是，我有 6 个元素（A、B、C、D、E、F），我想达到以下结果：

桌面屏幕：
甲乙
光盘
英法

手机屏幕：
一个
乙
光盘
电子
F

我对 A、B、E 和 F 没有任何问题（我使用了 col-xs-* 类），但我无法找到让 C 和 D 始终并排的方法。

你能帮帮我吗？ :)

ps 我的代码是这样的：

<div class="content">
    <div class="row">
         <div class="col-xs-2">a</div>
         <div class="col-xs-2">b</div>
    </div>
    <div class="row">
         <div>c</div>
         <div>d</div>
    </div>
    <div class="row">
         <div class="col-xs-2">e</div>
         <div class="col-xs-2">f</div>
    </div>
</div>

Answer 1

你只需要在每个断点指定列宽：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6">A</div>
        <div class="col-xs-12 col-sm-6">B</div>
        <div class="col-xs-6">C</div>
        <div class="col-xs-6">D</div>
        <div class="col-xs-12 col-sm-6">E</div>
        <div class="col-xs-12 col-sm-6">F</div>
    </div>
</div>

要在您的代码中使用它，如下所示：

<div class="content">
    <div class="row">
         <div class="col-xs-12 col-sm-6">a</div>
         <div class="col-xs-12 col-sm-6">b</div>
    </div>
    <div class="row">
         <div class="col-xs-6">c</div>
         <div class="col-xs-6">d</div>
    </div>
    <div class="row">
         <div class="col-xs-12 col-sm-6">e</div>
         <div class="col-xs-12 col-sm-6">f</div>
    </div>
</div>

Answer 2

带有引导程序的系统相当简单。有 4 种默认屏幕尺寸。 xs（小于 768 像素）、sm（768 像素及以上）、md（992 像素及以上）和 lg（1200 像素及以上）。您可以为每种尺寸设置不同的宽度，它会相应地换行。您可以为每个尺寸的屏幕应用一个 colclass 以使其调整大小以适应。文档对此非常有用。见http://getbootstrap.com/css/#grid

你的代码应该是这样的。

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-6">a</div>
        <div class="col-xs-12 col-md-6">b</div>
        <div class="col-xs-6">c</div>
        <div class="col-xs-6">d</div>
        <div class="col-xs-12 col-md-6">e</div>
        <div class="col-xs-12 col-md-6">f</div>
    </div>
</div>

你也可以为每两行放置一个行类。