Горизонтально выровнять некоторый div

Question

Я начал изучать Bootstrap с нескольких дней и столкнулся с проблемой горизонтального выравнивания.

В моем примере ниже я хочу равномерно распределить три элемента div: «первый», «второй» и «третий» на экране, но это не работает.

<div class="container">
    <div class="row justify-content-between">
        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
            <div class="first"></div>
        </div>

        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
            <div class="second"></div>
        </div>

        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
            <div class="third"></div>
        </div>
    </div>
</div>

Тем не менее "justify-content -ween" ничего не меняет ...

Кто-нибудь может мне помочь?

Answer 1

Если вы используете boostrap 4.1.1 https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css

.row используется

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;

}

так что вы можете просто использовать,

<div class="container">
    <div class="row ">
        <div class="col-12 col-md-4 first">
            <div class="text-center">
                first 1

            </div>
        </div>

        <div class="col-12 col-md-4 second">
            <div class="text-center">second<br>second</div>
        </div>

        <div class="col-12 col-md-4 third">
            <div class="text-center">third<br>third<br>third</div>
        </div>
    </div>
</div>

Далее следуйте https://getbootstrap.com/docs/4.1/layout/grid/

Answer 2

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

ПОЖАЛУЙСТА, откройте фрагмент в режиме полной страницы , чтобы увидеть его отчетливо

Я просто делаю фрагмент, чтобы показать вам 2 случая. В первом случае, если вы не используете фиксированную ширину, будет использоваться ширина столбца, как вы ее здесь определили col-12 col-sm-12 col-md-4 col-lg-4", но как только вы используете фиксированную ширину, вы должны центрировать div с помощью margin:auto

.row {
  background-color: #eee;
}

.first {
  height: 100px;
  /* width: 100px; */
  background-color: red;
}

.second {
  height: 100px;
  /* width: 100px; */
  background-color: blue;
}

.third {
  height: 100px;
  /* width: 100px; */
  background-color: green;
}


.first2 {
  height: 100px;
  width: 100px;
  background-color: red;
  margin: auto;
}

.second2 {
  height: 100px;
  width: 100px;
  background-color: blue;
  margin: auto;
}

.third2 {
  height: 100px;
  width: 100px;
  background-color: green;
  margin: auto;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row justify-content-between">
        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
            <div class="first"></div>
        </div>

        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
            <div class="second"></div>
        </div>

        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
            <div class="third"></div>
        </div>
    </div>
</div>


<div class="container mt-5">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
            <div class="first2"></div>
        </div>

        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
            <div class="second2"></div>
        </div>

        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
            <div class="third2"></div>
        </div>
    </div>
</div>


<div class="container mt-5">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
            <div class="first3"></div>
        </div>

        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
            <div class="second3"></div>
        </div>

        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
            <div class="third3"></div>
        </div>
    </div>
</div>

Answer 3

Используйте только класс col вместо всех других классов col-* для трех столбцов.

.first,
.second,
.third {
  height: 500px;
  border: 1px solid red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">
      <div class="first"></div>
    </div>

    <div class="col">
      <div class="second"></div>
    </div>

    <div class="col">
      <div class="third"></div>
    </div>
  </div>
</div>

Вы не должны использовать фиксированную высоту.Я использовал только, чтобы показать, что div s выровнены по центру.

Посетите эту ссылку для получения дополнительной информации

---

Обновление

Если содержимое столбцов равно img, как вы прокомментировали, то вам следует сделать следующее:

1. Использовать только col-12 и col-md-4.col-12 чехлы col-sm-12.И col-md-4 также охватывает col-lg-4.
2. Для изображений используйте классы img-fluid, d-block и mx-auto.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-12  col-md-4 ">
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Ward_Cunningham_-_Commons-1.jpg" alt="" class="img-fluid d-block mx-auto">
    </div>

    <div class="col-12 col-md-4 ">
      <img src="https://upload.wikimedia.org/wikipedia/commons/4/42/HNL_Wiki_Wiki_Bus.jpg" alt="" class="img-fluid d-block mx-auto">
    </div>

    <div class="col-12 col-md-4">
      <img src="https://upload.wikimedia.org/wikipedia/commons/9/96/History_Comparison_Example_%28Vector%29.png" class="img-fluid d-block mx-auto" alt="">
    </div>
  </div>
</div>

Проверьте это ручка

Обновление

Для того, чтобы увеличить пространство слева и справа отизображения, используйте px-5 для columns.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-12  col-md-4 px-5">
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Ward_Cunningham_-_Commons-1.jpg" alt="" class="img-fluid d-block mx-auto">
    </div>

    <div class="col-12 col-md-4 px-5">
      <img src="https://upload.wikimedia.org/wikipedia/commons/4/42/HNL_Wiki_Wiki_Bus.jpg" alt="" class="img-fluid d-block mx-auto">
    </div>

    <div class="col-12 col-md-4 px-5">
      <img src="https://upload.wikimedia.org/wikipedia/commons/9/96/History_Comparison_Example_%28Vector%29.png" class="img-fluid d-block mx-auto" alt="">
    </div>
  </div>
</div>

Отметьте эту ручку

, если вам все еще нужно больше места, используйте пользовательские CSS.

.px-10 {
 padding-left: 120px;
 padding-right: 120px;
}