Контейнерное пространство между столбцами

Question

У меня есть контейнер с несколькими рядами.И в каждом ряду у меня есть несколько столбцов.Я хотел бы увеличить пространство между каждым столбцом

<div class="main" style="margin-bottom:0px">
  <div class="container">
    <div class="row">
      <div class="col-md-4 card ">
        Colonne 1
      </div>

      <div class="col-md-4 card">
        Colonne 2
      </div>

      <div class="col-md-4 card">
        Colonne 3
      </div>
    </div>
  </div>
<div>

Answer 1

вместо usind col-x, в то время как вы хотите иметь одинаковую ширину, вы можете использовать только col, и они будут охватывать строку равной ширины и позволят вам добавить горизонтальные поля.

пример

.card {
  border: solid;/* to show where they are*/
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
   <div class="main" style="margin-bottom:0px">
      <div class="container">
        <div class="row">
          <div class="col  card mx-1 ">
            Colonne 1
          </div>

          <div class="col card mx-1">
            Colonne 2
          </div>

          <div class="col  card mx-1">
            Colonne 3
          </div>
        </div>
      </div>
    <div>

Ресурсы:

https://getbootstrap.com/docs/4.0/utilities/spacing/

• t - для классов, которые устанавливают margin-topили padding-top
• b - для классов, которые устанавливают margin-bottom или padding-bottom
• l - для классов, которые устанавливают margin-left или padding-left
• r -для классов, которые устанавливают margin-right или padding-right
• x - для классов, которые устанавливают * -left и * -right
• y - для классов, которые устанавливают * -top и * -bottom
• blank - для классов, которые устанавливают поле или отступ для всех 4 сторон элемента

, что является причиной добавления класса mx-1

---

https://getbootstrap.com/docs/4.0/layout/grid/, где вы можете найти класс col, который используется для автоматического определения размера столбцов, если все поля получают класс col, они должны иметь одинаковую ширину.

Answer 2

<div class="container">
<div class="card-deck text-center mb-5">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">test</h5>
      <hr class="w-50">
      <p class="text-left ml-3 mt-3"></p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">test</h5>
      <hr class="w-50">
      <p class="text-left ml-3 mt-3"></p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">test</h5>
      <hr class="w-50">
      <p class="text-left ml-3 mt-3"></p>
    </div>
  </div>
</div>
</div>

Я использовал это с картами, я думаю, это то, что вы ищете.Держи меня в курсе!;)

Answer 3

В столбцах начальной загрузки нет пробелов.Сделайте еще один div внутри по умолчанию, столбец 4 имеет отступ 15px, что означает, что если вы сделаете div внутри, он оставит место слева и справа.

<div class="col-sm-4">
   <div class="inner">
     Your Content Here
   </div>
</div>

Answer 4

Использовать свойство CSS margin.

.card {
  margin: 0px 10px;
}

Рабочий пример

.card {
  margin: 0px 10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="main" style="margin-bottom:0px">
  <div class="container">
    <div class="row">
      <div class="col col-md-4 card ">
        Colonne 1
      </div>

      <div class="col col-md-4 card">
        Colonne 2
      </div>

      <div class="col col-md-4 card">
        Colonne 3
      </div>
    </div>
  </div>
<div>