Bootstrap 3在MD / LG中更改Col-Nesting

Question

有没有改变COL分组的技巧？

正如你在图片中看到的那样，MD中的第一个COL 12应该很长，而LG只有9个。 在LG中，右栏应该向上滑动，这样：

问题： 如何在Bootstrap 3中实现这种不同的分组？ 或者没有MD / LG分组的技巧？

示例代码 XS-MD：好的。但LG：右栏（新闻）没有滑倒。

    <div class="container">
  <div class="row">
    <div class="col-md-12 col-lg-9 text-center">
      <h4>Title Text</h4>
    </div>
    <div class="col-sm-6 col-md-9 col-lg-9 text-center">
      <h4>Main</h4>
      .<br>
      .<br>
      .<br>
      .<br>
    </div>
    <div class="col-sm-6 col-md-3 col-lg-3 text-center">
      <h4>News</h4>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
    </div>
   </div>
</div>

bootply的实例：https://www.bootply.com/uDkg1vTKkZ

Answer 1

我会这样做：

<div class="container">
  <div class="row">
    <div class="col-md-12 hidden-lg text-center">
      <h4>Title</h4>
    </div>
    <div class="col-sm-6 col-md-9 text-center">
      <div class="visible-lg"><h4>Title</h4></div>
      <h4>Main</h4>
    </div>
    <div class="col-sm-6 col-md-3 text-center">
      <h4>Sidebar</h4>
    </div>
   </div>
</div>

此解决方案使用col-md-12类在大视图上隐藏hidden-lg。同时，它使用col-md-9类在visible-lg div中显示额外的标题div。

唯一的缺点是它会复制你的标题（div）。如果您不喜欢，可以使用window.onresize使用某些javascript获得完全相同的结果。 Javascript实际上可以从DOM中删除未使用的元素，而不是隐藏它。

Answer 2

您可以使用flexbox实现此布局。首先，使用display:flex;和flex-direction:row将父级设置为flex-wrap: wrap;。接下来设置标题（flex: 1 0 100%)，主容器（flex: 1 0 75%）和新闻容器（flex: 1 0 25%）的flex属性。这将实现您想要在顶部和两列在下一行中拆分75％25％。

然后，我设置一个宽度为1200px的断点，使用绝对定位将下栏移到右上角（position: absolute; right:0; top:0;），并使列占据容器的整个高度（{{ 1}}）。最后，我将title-container和main-container的宽度设置为75％height: 100%）。

(flex: 0 0 75%;

Here is a fiddle

Answer 3

只需交换第二和第三个div，然后像这样添加<div class="container"> <div class="row"> <div class="col-md-12 col-lg-9 text-center"> <h4>col-md-12 col-lg-9</h4> </div> <div class="col-sm-6 col-md-3 col-lg-3 text-center pull-right"> <h4>col-sm-6 col-md-3 col-lg-3</h4> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> </div> <div class="col-sm-6 col-md-9 col-lg-9 text-center"> <h4>col-sm-6 col-md-9 col-lg-9</h4> .<br> .<br> .<br> .<br> </div> </div> </div>

{{1}}

Check demo

要清除浮动，请检查clearfix

Answer 4

这样做的技巧，但需要复制中间元素才能正确显示在两个布局中。或者你可以使用javascript动态插入它。

/* BOOTSTRAP 3.x GLOBAL STYLES
-------------------------------------------------- */
body {
  padding-bottom: 40px;
  color: #5a5a5a;
}
DIV.row{
  border: 1px solid blue;
}
DIV.text-center{
  border: 1px solid red;
}

div[class^="col-lg-"],div[class^="col-md-"]{
padding:0;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>

<div class="container">
  <div class="row">

    <div class="col-md-12 col-lg-9">
      <div class="text-center">
        <h4>header</h4>
      </div>
    
      <!-- duplicate for display in different grid -->
      <div class="visible-lg visible-xs visible-sm text-center">
        <h4>Main</h4>
        <br/><br/><br/><br/><br/><br/>
      </div>
    </div>
    
    <div class="col-md-12 col-lg-3">
      <!-- duplicate for display in different grid -->
      <div class="visible-md col-md-9 text-center">
        <h4>Main</h4>
        <br/><br/><br/><br/><br/><br/>
      </div>
      
      <div class="text-center">
      <h4>News</h4>
        <br/><br/><br/><br/><br/><br/>
      </div>
    </div>

    
  </div>
</div>

这里有一个工作小提琴来更好地测试它（注意我删除了填充以获得更好的可见性，你可以删除css）JSBin