Как выровнять элементы по горизонтали?

Question

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

Вот как мне нужно, чтобы он выглядел:

Вот как это выглядит сейчас, выровнено по левому краю:

Вот мой код:

.price-selection {
	border: 1px solid #8ABE57;
	display: inline-block;
 }

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

<div class="row m-0">
  <div class="col-12 product-info-subtitle cuanto-pagar">
    <p>¿Cuánto quieres pagar?</p>
  </div>
  <div class="col-12">
    <div class="row justify-content-center">
      <div class="col-3 price-selection text-center">
        <p class="price">one</p>
        <p class="period">one</p>
      </div>
      <div class="col-3 price-selection text-center">
        <p class="price">two</p>
        <p class="period">two</p>
      </div>
      <div class="col-3 price-selection text-center">
        <p class="price">three</p>
        <p class="period">three</p>
      </div>
    </div>
  </div>       
</div> 

Answer 1

Вот правильная разметка для того, чего вы пытаетесь достичь:

.price-selection {
  border: 1px solid #8ABE57;
  display: inline-block;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-12 product-info-subtitle cuanto-pagar">
      <p>¿Cuánto quieres pagar?</p>
    </div>
    <div class="col-12">
      <div class="row justify-content-around">
        <div class="col-3 price-selection text-center">
          <p class="price">one</p>
          <p class="period">one</p>
        </div>
        <div class="col-3 price-selection text-center">
          <p class="price">two</p>
          <p class="period">two</p>
        </div>
        <div class="col-3 price-selection text-center">
          <p class="price">three</p>
          <p class="period">three</p>
        </div>
      </div>
    </div>
  </div>
</div>

Важная часть: я завернул col в row, который имеет класс justify-content-around.

Часть row исправляет поля / отступы сетки Bootstrap на экранах различных размеров.

justify-content-around дает ему justify-content: space-evenly. В настоящее время Bootstrap имеет только justify-content-around и justify-content-between. Однако, поскольку он был выпущен, во Flexbox было добавлено новое значение для justify-content (которое, вероятно, будет добавлено в Bootstrap), которое равно space-evenly. Однако у Bootstrap еще нет класса для него.

Если вы хотите разместить элементы равномерно, вам нужно добавить их в CSS самостоятельно:

.price-selection {
  border: 1px solid #8ABE57;
  display: inline-block;
}
.justify-content-evenly {
  display: flex;
  justify-content: space-evenly;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-12 product-info-subtitle cuanto-pagar">
      <p>¿Cuánto quieres pagar?</p>
    </div>
    <div class="col-12">
      <div class="row justify-content-evenly">
        <div class="col-3 price-selection text-center">
          <p class="price">one</p>
          <p class="period">one</p>
        </div>
        <div class="col-3 price-selection text-center">
          <p class="price">two</p>
          <p class="period">two</p>
        </div>
        <div class="col-3 price-selection text-center">
          <p class="price">three</p>
          <p class="period">three</p>
        </div>
      </div>
    </div>
  </div>
</div>

Чтобы лучше понять разницу между различными типами интервалов во flexbox, вот графическое объяснение: https://css -tricks.com / almanac / properties / j / justify-content / # article-header-id-1

Answer 2

Используйте m-0 для удаления турника.

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

Раствор 1

Я удалил justify-content-center, потому что он не может дать пробел между столбцами, поэтому используйте justify-content-around.

.price-selection {
  border: 1px solid #8ABE57;
  display: inline-block;
}

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

<div class="row m-0 justify-content-around element">
  <div class="col-3 price-selection text-center">
    <p class="price">one</p>
    <p class="period">one</p>
  </div>
  <div class="col-3 price-selection text-center">
    <p class="price">two</p>
    <p class="period">two</p>
  </div>
  <div class="col-3 price-selection text-center">
    <p class="price">three</p>
    <p class="period">three</p>
  </div>     
</div>

Решение 2

вы также можете использовать CSS для одинакового промежутка между столбцами (без класса начальной загрузки для space-evenly).

.element {     
    justify-content: space-evenly;
}

.price-selection {
	border: 1px solid #8ABE57;
	display: inline-block;
}
.element {     
    justify-content: space-evenly;
}

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

<div class="row m-0 element">
  <div class="col-3 price-selection text-center">
    <p class="price">one</p>
    <p class="period">one</p>
  </div>
  <div class="col-3 price-selection text-center">
    <p class="price">two</p>
    <p class="period">two</p>
  </div>
  <div class="col-3 price-selection text-center">
    <p class="price">three</p>
    <p class="period">three</p>
  </div>     
</div>