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

Question

更改 COL 分组有什么技巧吗？

正如你在图片中看到的，第一个 COL 12 在 MD 中应该很长，在 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>

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

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

Answer 2

只需交换第二个和第三个 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 3

您可以使用 flexbox 实现此布局。首先，使用flex-direction:row 和flex-wrap: wrap; 将父级设置为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 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