Как центрировать размер столбцов div в строке div в Bootstrap?

Question

• Мой ряд занимает большую часть недвижимости без предоставленного мной стиля CSS.Мне нравится эта часть хорошо.
• Мои столбцы имеют ширину, поэтому на большом экране они не растягиваются.Мне нравится это тоже.
• Я бы хотел, чтобы эти столбцы в центре строки.Прежде чем перейти к применению собственного стиля для этого, я хотел узнать, есть ли способ Bootstrap для этого.Я нашел text-center и center-box в сети, но ни один из них не работает в моем случае.

<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

Пример:

<div class="container" style="border: 2px #000 solid;">
    <div class="row text-center center-box" style="text-align: center;  border: 3px red solid"> 
        <div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 50px; height: 100px;">text</div>
        <div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 50px; height: 100px;">text</div>
        <div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 50px; height: 100px;">text</div>
    </div>
</div>

красная граница показывает очень хорошо вытянутый ряд.Столбцы div имеют ширину примерно 150 пикселей.Они остаются выровненными по левому краю.Можем ли мы центрировать их, используя приемы Bootstrap?

Предложено sachMati, но у меня не работает

<div class="container" style="border: 2px #000 solid;">
    <div class="row justify-content-center" style="text-align: center; border: 3px red solid;">
        <div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 50px; height: 100px;">text</div>
        <div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 50px; height: 100px;">text</div>
        <div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 50px; height: 100px;">text</div>
    </div>
</div>

Answer 1

Не знаю, почему используйте width, чтобы определить ширину для классов col-*, так как в этом суть класса col-*.Но если вы используете Bootstrap 4 , вы можете просто добавить justify-content-center в row div, и он будет центрировать его содержимое (если у него есть свободное место).

Вы можетеукажите меньший столбец для больших устройств, например, если вы используете col-sm-4 для маленьких экранов, вы можете использовать col-lg-2 для больших экранов, избегая установки определенной ширины, если это, конечно, выглядит так, как вам нужно, поскольку установка явного width побеждает назначение классов столбцов.

Попробуйте в полноэкранном режиме

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="border: 2px #000 solid;">
  <div class="row justify-content-center" style="text-align: center;  border: 3px red solid">
    <div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 50px; height: 100px;">text</div>
    <div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 50px; height: 100px;">text</div>
    <div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 50px; height: 100px;">text</div>
  </div>
</div>

Для Bootstrap 3 вы можете попробовать добавить гибкое поведение, и оно должно работать примерно так же;или вы можете придерживаться Bootstrap, используя offset-* классы.

.flex {
  display: flex;
  justify-content: center;
}

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

<div class="container" style="border: 2px #000 solid;">
  <div class="row flex" style="text-align: center;  border: 3px red solid">
    <div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 150px; height: 100px;">text</div>
    <div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 150px; height: 100px;">text</div>
    <div class="col-sm-4" style="background-color: yellow; border: 1px green solid; width: 150px; height: 100px;">text</div>
  </div>
</div>

<!-- Offset  -->

<div class="container" style="border: 2px #000 solid; margin-top: 20px">
  <div class="row" style="text-align: center;  border: 3px red solid">
    <div class="col-xs-2 col-xs-offset-3" style="background-color: yellow; border: 1px green solid; height: 100px;">text</div>
    <div class="col-xs-2" style="background-color: yellow; border: 1px green solid; height: 100px;">text</div>
    <div class="col-xs-2" style="background-color: yellow; border: 1px green solid; height: 100px;">text</div>
  </div>
</div>

Answer 2

Если вы хотите центрировать содержимое в ряду контейнера, попробуйте это

<div class="container">

    <div class="row justify-content-center">
       <!-- content of row  -->
    </div>
</div>