Как центрировать контент col-xs-4? - PullRequest
Новая
       16

Как центрировать контент col-xs-4?

0 голосов
/ 21 мая 2019

У меня есть HTML-блок: 

<div class="class-journal-mobile-navigation">
<div class="col-xs-4"><div class="block"></div></div>
<div class="col-xs-4"><div class="block"></div></div>
<div class="col-xs-4"><div class="block"></div></div>
</div>

Как центрировать блок div .block внутри родительского .col-xs-4?

Ответы [ 4 ]

1 голос
/ 22 мая 2019

Какую версию Bootstrap вы используете?Может потребоваться изменить, но это предполагает версию 4.

Сетки начальной загрузки должны иметь родительский класс row.

<div class="row class-journal-mobile-navigation">
  <div class="col-xs-4">
    <div class="block"></div>
  </div>
  <div class="col-xs-4">
    <div class="block"></div>
  </div>
  <div class="col-xs-4">
    <div class="block"></div>
  </div>
</div>

Для быстрого CSS, возможно, лучше сделать его более конкретным для .class-journal-mobile-navigation, который вы определили, и как потомок .col-xs-4. 

.class-journal-mobile-navigation .col-xs-4 {
  text-align: center;
}
.class-journal-mobile-navigation .col-xs-4 .block {
  display: inline-block;
}

Есть много полезныхКлассы CSS, которые вы можете использовать здесь.Чтобы помочь определить макет специально для точки останова XS и не нужен дополнительный CSS.Вот пример того, как некоторые из этих классов могут применяться к вашему примеру. 

<div class="row class-journal-mobile-navigation">
  <div class="col-xs-4 text-center text-sm-left">
    <div class="d-inline-block d-sm-block"></div>
  </div>
  <div class="col-xs-4 text-center text-sm-left">
    <div class="d-inline-block d-sm-block"></div>
  </div>
  <div class="col-xs-4 text-center text-sm-left">
    <div class="d-inline-block d-sm-block"></div>
  </div>
</div>

Flex-классы - это еще один вариант! 

<div class="col-xs-4 d-flex justify-content-center">
1 голос
/ 21 мая 2019

Если вы хотите выровнять содержимое div .block, вы можете использовать это 

.block {
  text-align:center;
}
1 голос
/ 21 мая 2019

Добавьте следующий CSS: 

.col-xs-4{
  text-align: center;
}

.block{
  display: inline-block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="class-journal-mobile-navigation">
  <div class="col-xs-4">
    <div class="block">A</div>
  </div>
  <div class="col-xs-4">
    <div class="block">B</div>
  </div>
  <div class="col-xs-4">
    <div class="block">C</div>
  </div>
</div>
0 голосов
/ 21 мая 2019

Вы пытались добавить text-center в класс col?Или вы можете попытаться добавить к классу строк класс justify-content-center.

...