Bootstrap 4 从 Bootstrap 3 迁移的网格布局问题

Question

使用 bootstrap 3.3.7 我能够“跨行”一个 div 多行，并用其他 div 填充剩余的列 space，例如使用此代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h1>Responsive Bootstrap 3.3.7</h1>
  <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="padding:0px">
      <div  style="background-color:green">level 1 - col-lg-6 col-md-6 col-sm-6 col-xs-6</div>
      <div  style="background-color:green">level 2 - col-lg-6 col-md-6 col-sm-6 col-xs-6</div>
      <div  style="background-color:green">level 3 - col-lg-6 col-md-6 col-sm-6 col-xs-6</div>
      <div  style="background-color:green">level 4 - col-lg-6 col-md-6 col-sm-6 col-xs-6</div>
      <div  style="background-color:green">level 5 - col-lg-6 col-md-6 col-sm-6 col-xs-6</div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>    
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>    
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3 - col 3</div>
  </div>  
</div>

我得到了： Bootstrap 3.3.7 example layout

但是使用 Bootstrap 4.1.1 我得到这个：

Bootstrap 4.1.1 example layout

只有前两个 div 填充剩余的 6 列，其余的在第一个 div 下移动，我试图查看文档，但我无法弄清楚, 是否有人能够在 boostrap 4 上复制第一个行为？

Answer 1

使用 Bootstrap-4，因为它使用 flex,，您需要提供包含列和行来定义所有内容之间的关系。如果您希望将 col-3 的十个部分放在一起，则将它们放入自己的 col-6 容器中，然后创建一个新行来容纳较小的列（现在是 col-6，因为它们开始了 12 个单元再来一遍）。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
        <h1>Responsive Bootstrap 4.6.0</h1>
        <div class="row">
            <div class="col-6" style="padding:0px">
                <div style="background-color:green">level 1 - col-6</div>
                <div style="background-color:green">level 2 - col-6</div>
                <div style="background-color:green">level 3 - col-6</div>
                <div style="background-color:green">level 4 - col-6</div>
                <div style="background-color:green">level 5 - col-6</div>
            </div>
            <div class="col-6 p-0">
                <div class="row">
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                    <div class="col-6" style="background-color:blue">Span 3 - col 3</div>
                </div>
            </div>
        </div>
    </div>

另外，您不需要在每个断点处定义列。指定 col-6 将提供从智能手机显示屏到宽屏显示器的六列跨度。如果您想要为更大的屏幕设置不同的列（从小屏幕开始并逐步增加），您只需要添加 col-lg-3。

Bootstrap 4 从 Bootstrap 3 迁移的网格布局问题

Bootstrap 4 grid layout problem migrating from Boostrap 3

html

css

twitter-bootstrap-3

bootstrap-4