Question

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

桌面屏幕：
A B
C D
E F

手机屏幕：
A
B
C D
E
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（768px及以上），md（992px及以上）和lg（1200px及以上）。您可以为每个尺寸设置不同的宽度，它将相应地换行。您可以为每个尺寸的屏幕应用col-class，以使其适合调整大小。文档对此非常有用。见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>

您还可以为每两行添加一个行类。

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

2 个答案: