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

Question

Я пытаюсь выровнять по центру три столбца Bootstrap.Я не хочу, чтобы столбцы охватывали всю строку.Я думаю, что это заставит изображения выглядеть слишком большими для места.Вот почему я поставил три столбца "col-md-3".Я предпочитаю этот размер столбца.Я просто хочу, чтобы столбцы выравнивались по центру.Я думал, что смогу применить имя класса "justify-content-md-center" к строке, и это будет работать, но это не работает.Кто-нибудь знает, как выровнять столбцы по центру, используя Bootstrap 3?Возможно ли это?

Вот мой код:

<div class="container">
    <div class="row justify-content-md-center">

        <div class="col-md-3 text-center">
            <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
        </div>

        <div class="col-md-3 text-center">
            <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
        </div>

        <div class="col-md-3 text-center">
            <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
        </div>

    </div><!-- end row -->
</div><!-- end container -->

Просмотреть на CodePen .

Спасибо запомогает!

Answer 1

Для этого я бы использовал 2 строки, первая с -offset (я использовал 8 со смещением 2).Затем измените ваши 3 столбца на 4, вместо 3, чтобы добавить до 12.

Вот так (используя xs размер столбца для демонстрации):

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

<div class="container">

  <div class="row">
    <div class="col-xs-8 col-xs-offset-2">

      <div class="row">
        <div class="col-xs-4 text-center">
          <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
        </div>

        <div class="col-xs-4 text-center">
          <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
        </div>

        <div class="col-xs-4 text-center">
          <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
        </div>
      </div>
      <!-- end row 2 -->

    </div>
  </div>
  <!-- end row 1 -->

</div>
<!-- end container -->

Answer 2

надеюсь, что это то, что вы хотели, вы не можете установить ширину столбца 3 из 12 и ожидать получения центрированных элементов, поэтому вам нужно установить его 4 (4 * 3 = 12) (полная ширина строки / 3), а затемВы устанавливаете максимальную ширину контейнера точно так же, как это https://codepen.io/Dadboz/pen/pQQBMR

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<div class="container" style="max-width :760px">
	<div class="row d-flex justify-content-center">

		<div class="col-md-4  text-center">
			<img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
		</div>

		<div class="col-md-4 text-center">
			<img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
		</div>

		<div class="col-md-4 text-center">
			<img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
		</div>

	</div><!-- end row -->
</div><!-- end container -->

Answer 3

Вы можете сместить каждый столбец, используя класс col-md-offset-* в Bootstrap, следующим образом:

<div class="container">
    <div class="row">

        <div class="col-md-3 col-md-offset-1 text-center">
            <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
        </div>

        <div class="col-md-3 col-md-offset-1 text-center">
            <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
        </div>

        <div class="col-md-3 col-md-offset-1 text-center">
            <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
        </div>

    </div><!-- end row -->
</div><!-- end container -->

Приведенный выше метод добавит равные пробелы между относительными столбцами.

Answer 4

Как уже отмечали другие, замените col-md-3 на col-md-4

Я не хочу, чтобы столбцы занимали всю строку.Я думаю, это заставит изображения выглядеть слишком большими для пространства.

решение, которое я знаю для Bootstrap 3, заключается в добавлении max-width в контейнер, чтобы он не растягивался на весь экран/ element (без удаления 100% из изображений, поскольку это больше не приводит к их изменению размера / отзывчивости).

Вы также можете использовать col-sm-4 или col-sm-6, чтобы они нев результате экран становится слишком большим:

https://codepen.io/StudioKonKon/pen/yQQrdM

.mycontent
{
   max-width: 800px; /* or something else */
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<div class="container mycontent">
	<div class="row justify-content-md-center">

		<div class="col-md-4 text-center">
			<img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
		</div>

		<div class="col-md-4 text-center">
			<img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
		</div>

		<div class="col-md-4 text-center">
			<img alt="TBD" width="100%" src="https://via.placeholder.com/150" />
		</div>

	</div><!-- end row -->
</div><!-- end container -->

Answer 5

Все, что вам нужно сделать, это изменить col-md-3 на col-md-4.В Bootstrap числа в div.row должны составлять до 12, включая использование смещений.

Также избавьтесь от width="100%" из столбцов, потому что это растянет ваше изображение и будет использовать именно тот размер изображения, который вам нужен.

https://getbootstrap.com/docs/3.3/examples/grid/

https://codepen.io/anon/pen/XyyQVR