Класс .justify-content-center не работает при применении к .row (Bootstrap 4.4.1) - PullRequest
Новая
       6

Класс .justify-content-center не работает при применении к .row (Bootstrap 4.4.1)

0 голосов
/ 17 марта 2020

У меня есть следующий код: 

<div class="container pt-5">
    <div class="row">
        <div class="col-6 col-sm-3">
          <ul>
              <li>Example List Item</li>
              <li>Example List Item</li>
              <li>Example List Item</li>
          </ul>
        </div>
        <div class="col-6 col-sm-3">
            <ul>
              <li>Example List Item</li>
              <li>Example List Item</li>
              <li>Example List Item</li>
            </ul>
        </div>
        <div class="col-6 col-sm-3">
            <ul>
              <li>Example List Item</li>
              <li>Example List Item</li>
              <li>Example List Item</li>
            </ul>
        </div>
        <div class="col-6 col-sm-3">
            <ul>
              <li>Example List Item</li>
              <li>Example List Item</li>
              <li>Example List Item</li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 text-center">
            <p class="copyright pt-5 text-muted">Blah blah blah.</p>
        </div>
    </div>
</div>

Я использую последнюю версию Boostrap 4 (4.4.1) и хочу центрировать столбцы в верхнем .row. У меня были проблемы с этим. Когда я добавляю .justify-content-center к строке, это абсолютно не влияет (набор столбцов остается очищенным влево в точке, где начинается мой контейнер). Я пробовал другие варианты, такие как .justify-content-end, чтобы посмотреть, работает ли что-нибудь. Я также попытался создать свой собственный класс css с justify-content: center; и использовать его вместо класса Bootstrap. Не повезло. Второй .row центрируется нормально.

1 Ответ

1 голос
/ 18 марта 2020

Попробуйте: 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-2">
      3 of 3
    </div>
  </div>
</div>
...