引导中的布局div

Question

我正在为我的Web应用程序使用引导程序。我希望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，以便可以所需的格式显示

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

Answer 2

您需要检查您的col总计为12，看起来像是您的某些响应式选择器，例如col-md-12引起了问题。这是一个工作示例：

.col-4, .col-8 > .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

Answer 3

std::numeric_limits<int>::lowest()

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