Почему мои столбцы ведут себя по-разному после обновления до Bootstrap 4? - PullRequest
Новая
       35

Почему мои столбцы ведут себя по-разному после обновления до Bootstrap 4?

0 голосов
/ 13 января 2020

Если я выполню следующее в bootstrap 3, тогда все будет работать как положено. Но он не работает корректно в bootstrap 4. Пожалуйста, выполните приведенные ниже примеры: сначала выполняется с BS4, а затем с BS3.

Я ожидаю, что это будет похоже на Bootstrap 3.3.6 . 

#orange_containers .row div {
  background: orange;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="orange_containers" class="">

  <div class="row no-gutters">
    <div class="col-sm-6">
      <div class="col-sm-3">
        <div class="icon">
          A
        </div>
      </div>
      <div class="col-sm-9">
        <div class="text">
          <h4>Test</h4>
          <p>
            I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. If Trump Ipsum weren’t my own words, perhaps I’d be dating it.
          </p>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="col-sm-3">
        <div class="icon">
          B
        </div>
      </div>
      <div class="col-sm-9">
        <div class="text">
          <h4>Test</h4>
          <p>
            The other thing with Lorem Ipsum is that you have to take out its family. We have so many things that we have to do better... and certainly ipsum is one of them. We are going to make placeholder text great again. Greater than ever before.
          </p>
        </div>
      </div>
    </div>
  </div>

</div>

Bootstrap 4 

#orange_containers .row div {
  background: orange;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="orange_containers" class="">

  <div class="row no-gutters">
    <div class="col-sm-6">
      <div class="col-sm-3">
        <div class="icon">
          A
        </div>
      </div>
      <div class="col-sm-9">
        <div class="text">
          <h4>Test</h4>
          <p>
            I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. If Trump Ipsum weren’t my own words, perhaps I’d be dating it.
          </p>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="col-sm-3">
        <div class="icon">
          B
        </div>
      </div>
      <div class="col-sm-9">
        <div class="text">
          <h4>Test</h4>
          <p>
            The other thing with Lorem Ipsum is that you have to take out its family. We have so many things that we have to do better... and certainly ipsum is one of them. We are going to make placeholder text great again. Greater than ever before.
          </p>
        </div>
      </div>
    </div>
  </div>

</div>

Примечание. Необходимо просмотреть результат в полноэкранном режиме.

Попробуйте Bootstrap 3, пример в Bootply

Попробуйте Bootstrap 4 Пример в Bootply

1 Ответ

2 голосов
/ 13 января 2020

Я думаю, вам нужно добавить контейнер и несколько строк. Также вы не можете иметь col в качестве ребенка от другого col, это должно быть в ряду. Подробности смотрите здесь: https://getbootstrap.com/docs/4.4/layout/grid/#nesting

Попробуйте изменить код на следующее: 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div id="orange_containers" class="">

    <div class="container-fluid">

        <div class="row no-gutters">

            <div class="col-sm-6">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="icon">
                            A
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="text">
                            <h4>Test</h4>
                            <p>
                                I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. If Trump Ipsum weren’t my own words, perhaps I’d be dating it.
                            </p>
                            /div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="icon">
                            B
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="text">
                            <h4>Test</h4>
                            <p>
                                The other thing with Lorem Ipsum is that you have to take out its family. We have so many things that we have to do better... and certainly ipsum is one of them. We are going to make placeholder text great again. Greater than ever before.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

</div>
...