可以在一个容器中嵌套两行吗？答案

【问题标题】：Is it okay to nest two rows in one container?可以在一个容器中嵌套两行吗？
【发布时间】：2019-09-11 06:02:45
【问题描述】：

我正在使用 Bootstrap 4 设计一个网站，我希望第一个内容位于一行，而其他内容位于另一行。

我通过将两个列嵌套在一个列中然后连续嵌套来实现这一点。但我不认为这样做是合乎逻辑的。所以，我想知道是否可以将内容单独放在一行中，然后放在一个容器中。

<div class="container">
 <div class="row">
  <div class="col-sm-12 text-center text-content">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit magni tempore magnam cumque est explicabo placeat error culpa ipsum, cupiditate sit debitis animi reprehenderit nostrum dolorum veniam nemo quidem, illo ullam! Suscipit totam tempora, ullam et odit assumenda unde perspiciatis omnis autem nulla est deserunt excepturi, tenetur porro ut voluptatibus.</p>
   </div>
  </div><!--row-->
 <div class="row">
  <div class="col elld-btn text-center">
    <a href="#" class="btn btn-lg button1" role="button" aria-pressed="true"><i class="fas fa-download"></i>Download Elld</a>
    <a href="#" class="btn btn-lg button2" role="button" aria-pressed="true"><i class="fas fa-book-open"></i>View Docs</a>
   </div>
 </div>
</div><!--container-->

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

是的。

参考中的示例在一个容器中也有多行。

https://getbootstrap.com/docs/4.3/layout/grid/#equal-width

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

您也可以这样做，您可以在一个容器中嵌套两行，但如果有很多可能避免row class 创建间距，因为row 类使用margin: 0 15px，您需要设置@ 987654324@margin: 0

<div class="container">
 <div class="row">
  <div class="col-sm-12 text-center text-content">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit magni tempore magnam cumque est explicabo placeat error culpa ipsum, cupiditate sit debitis animi reprehenderit nostrum dolorum veniam nemo quidem, illo ullam! Suscipit totam tempora, ullam et odit assumenda unde perspiciatis omnis autem nulla est deserunt excepturi, tenetur porro ut voluptatibus.</p>
   </div>
   <div class="col elld-btn text-center">
    <a href="#" class="btn btn-lg button1" role="button" aria-pressed="true"><i class="fas fa-download"></i>Download Elld</a>
    <a href="#" class="btn btn-lg button2" role="button" aria-pressed="true"><i class="fas fa-book-open"></i>View Docs</a>
   </div>
 </div><!--row-->
</div><!--container-->

【讨论】：