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

Question

是否有更改 COL 分组的技巧？

如图所示，第一个COL 12在MD应该是长的，在LG只有9。在LG中，右栏应该向上滑动，这样：

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

示例代码 XS-MD：好的。 BUT LG：右栏（News）没有漏掉。

    <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

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

然后，我在宽度1200px处设置断点，使用绝对定位将下方的列移动到右上角(position: absolute; right:0; top:0;)，让列占满容器的整个高度( height: 100%)。最后，我将 title-container 和 main-container 的宽度设置为 75% (flex: 0 0 75%;).

html, body  { 
    height: 100%;
    width: 100%;
}

.parent {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    height: 500px;
    width: 100%;
}

.title-container {
    background-color:red;
    height:50%;
    flex: 1 0 100%; 
}

.main-container {
    background-color:green;
    height: 50%;
    flex: 1 0 75%;
}

.news-container {
    background-color:orange;
    height: 50%;
    flex: 1 0 25%;
}

@media (min-width: 1200px){


.news-container {
    height:100%;
    position: absolute;
    right:0;
    top:0;
    width:25%;
}

.title-container, .main-container {
    flex: 0 0 75%;
}

.parent {
    position:relative;
}

.main-container {
    height:50%;
}
}

<div id="parent-container" class="container">
    <div id="row-container" class="row parent">
        <div class="col-md-12 col-lg-9 text-center title-container">
            <h4>Title Text</h4>
        </div>
        <div class="col-sm-6 col-md-9 col-lg-9 text-center main-container">
            <h4>Main</h4>
        </div>
        <div class="col-sm-6 col-md-3 col-lg-3 text-center news-container">
            <h4>News</h4>
        </div>
    </div>
</div>

Here is a fiddle

Answer 2

我会这样做：

<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>

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

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

Answer 3

只需交换第 2 个和第 3 个 div，然后像这样添加 .pull-right

<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>

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>

这里有一个有效的 fiddle 可以更好地测试它（注意我删除了填充以获得更好的可见性，您可以删除 css）JSBin

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

Bootstrap 3 change Col-Nesting in MD/LG

nested

col

media-queries

twitter-bootstrap

twitter-bootstrap-3