Question

这是我的代码：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            A   
        </div>
        <div class="col-md-6">
            B     
        </div>
        <div class="col-md-6">
            C     
        </div>
    </div>
</div>

充满实际内容，看起来有点像这样： http://www.bootply.com/JZj51T1G1E#

在不改变HTML结构的情况下，有没有办法强制B在左下方显示？ C应该仍然保持在右侧。我尝试使用pull-6，但这会导致它显示在A。

上

Answer 1

如果您无法更改标记，可以使用.col-md-6:nth-child(1) { background-color: #f00; } .col-md-6:nth-child(2) { background-color: #ff0; } .col-md-6:nth-child(3) { background-color: #f0f; } @media (min-width: 992px) { .row { display: flex; flex-flow: row wrap; } .col-md-6:nth-child(2) { order: 3; } .col-md-6:nth-child(3) { order: 2; } }

重新排列标记

使用CSS3 Prefixer支持稍微旧的浏览器。以全屏输出。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
    </div>
    <div class="col-md-6">
      <br>B
      <br>B
      <br>B
      <br>B
      <br>B
      <br>B
      <br>B
      <br>B
      <br>B
      <br>B
      <br>B
      <br>B
    </div>
    <div class="col-md-6">
      <br>C
      <br>C
      <br>C
      <br>C
      <br>C
      <br>C
      <br>C
      <br>C
      <br>C
      <br>C
      <br>C
      <br>C
      <br>C
    </div>
  </div>
</div>

{{1}}

Answer 2

每行包裹12个以上的cols。请每行包裹12个或更少的cols：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            A   
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            B     
        </div>
        <div class="col-md-6">
            C     
        </div>
    </div>
</div>

上面的代码结构是在bootstrap中添加列的正确方法，它也可以根据需要将B移到A的左下方。

Answer 3

将<div class="container"> <div class="row"> <div class="col-md-6"> A </div> <div class="col-md-6 second-col"> B </div> <div class="col-md-6"> C </div> </div> </div>添加到第二个div的CSS中。但是，这不会改变C也低于A的事实。

<强> HTML

.second-col{
    clear:left;
  }

<强> CSS

map<string, vector<int>>

强制Bootstrap col位于2列布局

3 个答案: