Центрировать последние столбцы в Bootstrap 3 - PullRequest
Новая
       101

Центрировать последние столбцы в Bootstrap 3

0 голосов
/ 21 ноября 2019

У меня есть случайные числа столбцов (генерируемые циклом FOR). 

  <div class="container">
    <div class="row">
      <div class="col-sm-4 col-xs-6">CONTENT</div>
      <div class="col-sm-4 col-xs-6">CONTENT</div>
      <div class="col-sm-4 col-xs-6">CONTENT</div>
      <div class="col-sm-4 col-xs-6">CONTENT</div>
      <div class="col-sm-4 col-xs-6">CONTENT</div>
    </div>
  </div>

Я бы хотел отцентрировать последний ряд столбцов. По умолчанию самые последние 1 или 2 столбца выравниваются по левому краю. Есть ли способ легко их центрировать, или я должен пропустить, используя «col-» и использовать вместо него flexbox?

Источник: CODEPEN.IO

Ответы [ 3 ]

1 голос
/ 21 ноября 2019

Вы можете добавить гибкий стиль к родительскому элементу вашего столбца, который здесь .row в этом примере. 

.mycol {
  background: tomato;
  padding: 10px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

.row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
<div class="container">
  <div class="row">
    <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
        <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
            <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
            <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
    <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
  </div>
</div>
0 голосов
/ 21 ноября 2019

Добавьте это к 4-му делению вот так <div class ="col-sm-offset-2>

0 голосов
/ 21 ноября 2019

попробуйте вот так ... я добавил класс выравнивания центра для отображения div центра

html 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row align-center">
    <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
        <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
            <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
            <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
    <div class="col-sm-4 col-xs-6 mycol">CONTENT
    </div>
  </div>
</div>

css 

.mycol {
  background: tomato;
  padding: 10px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: white;
}
.align-center{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
...