引导程序中的布局 div [重复]答案

【问题标题】：layout divs in bootstrap [duplicate]引导程序中的布局 div [重复]
【发布时间】：2019-05-01 08:18:27
【问题描述】：

我正在为我的网络应用程序使用引导程序。我希望我的 div 显示如下：

我的html如下：

<div class="row">
    <div class="col-lg-8 col-md-12 col-sm-12 mb-4">
    <!--content-->
    </div>
    <div class="col-lg-4 col-md-6 col-sm-6 mb-4">
    <!-content-->
    </div>
</div>
<div class="row">
    <div class="col-lg-8 col-md-12 col-sm-12 mb-4">
    <!--content-->
</div>

但是显示的输出如下：

如何更改 html 以便以所需格式显示

【问题讨论】：

人们不使用css网格时的感觉

标签： html bootstrap-4

【解决方案1】：

要做到这一点，你应该在列内右行列试试这个

<div class="container border border-primary">
<div class="row border border-primary">
    <div class="border border-primary col-lg-8 col-md-12 col-sm-12" style="height:200px">
        <div class="row border border-secondary">
            <div class="border border-secondary col-lg-12 col-md-12 col-sm-12" style="height:100px">
                <!--content for 1-->
            </div>
            <div class="border border-secondary col-lg-12 col-md-12 col-sm-12" style="height:100px">
                <!--content for 2-->
            </div>
        </div>
    </div>
    <div class="border border-primary col-lg-4 col-md-6 col-sm-6" style="height:200px">
        <!-content for 3-->
    </div>
</div>

【讨论】：

【解决方案2】：

您需要检查您的 col 加起来是否为 12，看起来您的某些响应式选择器（例如 col-md-12）是导致问题的原因。这是一个工作演示：

.col-4, .col-8 &gt; .row{border: 3px solid black; padding: 30px; }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-8">
    <div class="row">
      <!--content-->
      col-8
    </div>
    <div class="row">
      <!--content-->
      col-8
    </div>
  </div>
  <div class="col-4">
    <div class="row">
      col-4
    </div>
  </div>
</div>

请参考Bootstrap docs on Grid System for more info

【讨论】：

【解决方案3】：

div {
  border: 1px solid #3d3d3d;
  padding: 5px;
}
// Dont consider this css

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-12">col-md-12</div>
        <div class="col-md-12">col-md-12</div>
      </div>
    </div>
    <div class="col-md-4">col-md-4</div>
  </div>
</div>

【讨论】：

很好，也许可以考虑将col-md-x 更改为col-x 以便当OP 运行代码sn-p 时，他们可以在浏览器中看到非堆叠示例