Question

我有一个简单的引导网格设置为两列（内容左右），可以将所有内容分解为移动设备和平板电脑中的一列。

<div class="row">
    <div class="col-md-6">Left Column</div>
    <div class="col-md-6">Right Column</div>
</div>

问题是我在两列分解为一列后尝试在每列中输入内容。换句话说：我有两个段落在两列之间，当页面在桌面上时，段落的第一部分在第一列，而另一段在第二列中与它水平对齐，所以当网格断开时，第二部分在第一部分中的所有其他部分下面而不是段落的第一部分。

<div class="row">
    <div class="col-md-6">
        <p>PARAGRAPH 1 PART 1</p>
        <p>other stuff</p>
        <p>other stuff</p>
        <p>other stuff</p>
        <p>other stuff</p>
    </div>
    <div class="col-md-6">
        <p>PARAGRAPH 1 PART 2</p>
        <p>other stuff</p> 
        <p>other stuff</p>   
        <p>other stuff</p> 
    </div>
</div>

简而言之，只剩下一列，第1部分第2部分需要在第1部分第1部分下面。

我已经研究过bootstrap push and pull，并且在这种情况下不会起作用。否则，我无法找到有关此特定问题的任何文档。

Answer 1

问题是.col-md-x为设备设置x列＆gt; = 940px，当宽度低于该值时，烤架将垂直显示，因此第二个col-md-6（第二部分）位于下方第一部分（第一部分）的所有内容，然后说了。

您可以使用：

<div class="row">
    <div class="col-md-6">
        <p>PARAGRAPH 1 PART 1</p>
    </div>
    <div class="col-md-6">
        <p>PARAGRAPH 1 PART 2</p>
    </div>
    <div class="col-md-6">
        <p>other stuff1</p>
        <p>other stuff1</p>
        <p>other stuff1</p>
        <p>other stuff1</p>
    </div>
    <div class="col-md-6">        
        <p>other stuff2</p> 
        <p>other stuff2</p>   
        <p>other stuff2</p> 
    </div>
</div>

或相同但更结构化的

<div class="row">
    <div class="col-md-6">
        <p>PARAGRAPH 1 PART 1</p>
    </div>
    <div class="col-md-6">
        <p>PARAGRAPH 1 PART 2</p>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <p>other stuff1</p>
        <p>other stuff1</p>
        <p>other stuff1</p>
        <p>other stuff1</p>
    </div>
    <div class="col-md-6">        
        <p>other stuff2</p> 
        <p>other stuff2</p>   
        <p>other stuff2</p> 
    </div>
</div>

但我真的建议您使用：CSS3 Multiple Columns

Answer 2

有几种方法可以解决它。但我建议使用更多列，然后根据需要添加推拉类。代码如下。

<div class="row">
    <div class="col-md-6 col-xs-12">
        <p>PARAGRAPH 1 PART 1</p>
    </div>
    <div class="col-md-6 col-xs-12 col-xs-push-12">
        <p>other stuff</p>
        <p>other stuff</p>
        <p>other stuff</p>
        <p>other stuff</p>
    </div>
    <div class="col-md-6 col-xs-12 col-xs-pull-12">
        <p>PARAGRAPH 1 PART 2</p>
    </div>
    <div class="col-md-6 col-xs-12">
        <p>other stuff</p> 
        <p>other stuff</p>   
        <p>other stuff</p> 
    </div>
</div>

注意：我添加了额外的类（我认为在一些额外的地方使用col-xs-12）只是为了让它更明确一些。

Answer 3

您可以使用hidden-xs，hidden-sm和visible-xs，visible-sm来实现您想要的效果。

基本上，你将hidden-xs和hidden-sm添加到另一列的PARAGRAPH 1 PART 2中，然后在原始列中使用visible-xs和visible-sm添加相同的东西。这就是我的意思：

<div class="row">
    <div class="col-md-6">
        <p>PARAGRAPH 1 PART 1</p>
        <p class="visible-xs visible-sm">PARAGRAPH 1 PART 2</p>
        <p>other stuff</p>
        <p>other stuff</p>
        <p>other stuff</p>
        <p>other stuff</p>
    </div>
    <div class="col-md-6">
        <p class="hidden-xs hidden-sm">PARAGRAPH 1 PART 2</p>
        <p>other stuff</p>
        <p>other stuff</p>
        <p>other stuff</p>
    </div>
</div>

使用Bootstrap Grid中的列对内容进行排序

3 个答案: