Question

我在这里读到了一些关于以下内容的帖子：

列之间的装订线
＆＃34;大多数左边＆＃34;没有排水沟。和＃34;最正确的＆＃34;列
2个固定尺寸的列
根据屏幕尺寸重新排序列

我有一个需要所有组合的布局。附件是layout模拟。以下是我到目前为止所做的工作jsfiddle

<div class="container">
  <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 a">News</div>
    <div class="col-lg-3 col-md-3 col-sm-12 b">Videos</div>
    <div class="col-lg-3 col-md-3 col-sm-6 c">MRec1</div>
    <div class="col-lg-3 col-md-3 col-sm-6 d">MRec2</div>
    <div class="col-lg-3 col-md-3 col-sm-6 e">Button1</div>
  </div>
</div>

jQuery(document).ready(function() {

  $(window).resize(function() {
    iTargetWidth = $(window).width();
    if (iTargetWidth <= 768) {
      $(".b").insertAfter(".e");
      $(".c").insertBefore(".a");
    }
  });
})

Answer 1

列，即class="col-*-*"的元素左右两侧有15px的填充。
container类的元素在左侧和右侧有15px的填充。 row类的左右边距为-15px。这会消除container填充的效果。
所有col-*-*类都是相对的。

4.要执行此操作，您将使用pull-md-left或pull-sm-right

为了更好地理解，请参阅http://getbootstrap.com/components/

Bootstrap 3 - 固定宽度+流体柱，重新排序柱，柱排水沟

1 个答案: