Question

我正在设计一个带有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-->

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

Answer 2

您也可以这样做，您可以在一个容器中嵌套两行，但是如果有很多避免使用row class创建间距的可能性，因为row类将margin: 0 15px用于您需要在row上设置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-->

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

2 个答案: