Блог

Я разрабатываю сайт с помощью 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-->

  

Да, это так.

Пример в ссылке также содержит несколько строк в контейнере.

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>
  

Вы также можете сделать это так, вы можете вложить две строки в один контейнер, но если есть много возможностей избежать создания интервалов row class , потому row что class используется 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-->