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

Posted 2023-03-06

【中文标题】Bootstrap 3 更改 MD/LG 中的 Col-Nesting

【英文标题】：Bootstrap 3 change Col-Nesting in MD/LG

【发布时间】：2018-07-03 10:31:55

【问题描述】：

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

【参考方案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 中移除未使用的元素，而不是隐藏它。

【讨论】：

+1 用于复制成本最低的元素（标题）。但它将与主元素在同一个容器中，这与操作想要的略有不同

是的。不幸的是，我不知道如何以另一种方式解决它。

【参考方案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

【参考方案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

【讨论】：

“flex”，好主意！但是 Bootstrap 3 适用于旧浏览器。所有旧浏览器都支持“flex”，包括在 bootstrap 3 中吗？如何在 IE8 中做到这一点？

我要退出这个。 IE8 (***.com/questions/5769493/…) 不支持媒体查询。您可以尝试条件样式表。如果您需要 IE8 (getbootstrap.com/docs/3.3/getting-started) 中的媒体查询支持，您也可以使用 respond.js。祝你好运，祝你好运。

是的，很遗憾我们仍然需要考虑 IE8。我们的一小部分用户使用旧笔记本、标准浏览器 IE8。 _ 是的，我们正在为 Internet Explorer 8 和 9 使用 respond.js！

和 html5shiv.js

【参考方案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