html - 在 Twitter Bootstrap 3.1 中重新排序 div 未按预期工作

Question

我正在尝试使用 Bootstraps 推/拉类重新排序 div 标签。这个 stackoverflow 在一定程度上回答了它:

Reordering divs responsively with Twitter Bootstrap?

但我不认为答案是完整的。是的，它将 div 移动到正确的位置，但是一旦您将内容添加到标记为“B”的 div，它就会下推标记为“C”的 div。

如何将“C”保持在“A”的正下方而不让“B”将其向下推？

示例:http://www.bootply.com/WYZUhmD0Ft

我能够使用“向右拉”和“向左拉”来代替，它们起作用了。但是，它们没有响应，需要额外的 CSS 才能在不同的断点处工作。

http://www.bootply.com/PILUCrxwYa

Answer 1

看看this回答类似的问题。

你想要的布局可以使用 float 来实现。

<div class="container">    
<div class="row">
    <div class="col-xs-12 col-md-3 pull-right">Content of A</div>
    <div class="col-xs-12 col-md-9 pull-left">
        <p>Content</p>
        <p>of</p>
        <p>B</p>
    </div>        
    <div class="col-xs-12 col-md-3 pull-right">Content of C</div>
</div>

编辑:

如果您只在某些屏幕上需要这种行为，您可以创建自己的类:

在您的 LESS 文件中添加这些自定义样式:(从 grid.less 中获取的变量)

@media (min-width: @screen-sm-min) {
   .pull-right-sm {
       float: right;
   }
}

@media (min-width: @screen-md-min) {
    .pull-right-md {
        float: right;
    }
}

@media (min-width: @screen-lg-min) {
    .pull-right-lg {
         float: right;
    }
}

现在你有了类 pull-right-sm pull-right-md pull-right-lg。