Как сделать так, чтобы bootstrap 4 отображал дочерний элемент в классе строки

Question

Я пытался сделать дочерний div в качестве блока отображения с помощью класса d-block, но он не работает bootstrap 4-строчный класс будет принимать flex для отображения, я пытался добиться с помощью clearfix, но безрезультатно, пожалуйста, кто-нибудь поможет мне в этом. Пожалуйста, кто-нибудь помогите мне в этом

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ul</p>
    </div>
    <div class="row d-block p-0">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
   </div>
 </div>

Answer 1

Класс bootstrap 4 .row имеет следующие значения css:

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

Итак, элемент с классом row становится flex-container и все непосредственные дочерние элементы этого контейнера становятся flex-item или flex-child. поэтому в вашем коде вложенное row становится flex-child, а по умолчанию для display: flex; свойство flex-direction установлено на row, что позволяет всем гибким дочерним элементам сидеть рядом друг с другом в одной строке, а их содержимое определяет ширину , Здесь flex-wrap: wrap; заставляет детей переноситься на следующую строку, если flex-container не хватает места.

Таким образом, добавив класс d-block, если вы пытаетесь заставить его занимать всю ширину, он не будет как это flex-child. Чтобы он занимал всю доступную ширину, вы можете использовать класс размеров bootstrap w-100, чтобы заставить его занимать всю доступную ширину вместо d-block.

Answer 2

Я думаю, вам нужна полная ширина. Вы можете установить гибкий столбец в родительском ряду, добавив flex-column class

<div class="container">
  <div class="row flex-column">
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ul</p>
    </div>
    <div class="row d-block p-0">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
   </div>
 </div>