Bootstrap 4 шесть ящиков в одном ряду (отзывчивый)?

Question

Как я могу сделать шесть ящиков на одной линии с интервалом между ними?

Я пробовал все, но чтобы получить разницу между ними, мне пришлось использовать очень отрицательные поля, и дизайн не отвечал: (

Я оставляю здесь пример того, что я хочу

Answer 1

Попробуйте использовать структуру сетки начальной загрузки:

.content {
  border: 4px solid black;
  width: 100%;
  height: 100px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
  
<div class="container">
  <div class="row">
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-2 mt-4">
      <div class="content"></div>
    </div>
  </div>
</div>

Answer 2

Попробуйте это Ссылка Jsfiddle здесь . Я не советую использовать классы начальной загрузки .row и .col, если это не изменение макета. В соответствии с проблемой, описанной выше, это вид элементов, поэтому я рекомендую использовать чистые стили flex css для упорядочивания этих блоков.

.box-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -5px;
  margin-right: -5px;
}

.box {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: calc(16.66% - 10px);
  min-height: 50px;
  min-width: 85px;
  background-color: #ccc;
  margin: 5px 5px;
}

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="box-wrapper">
        <div class="box">01</div>
        <div class="box">02</div>
        <div class="box">03</div>
        <div class="box">04</div>
        <div class="box">05</div>
        <div class="box">06</div>

        <div class="box">01</div>
        <div class="box">02</div>
        <div class="box">03</div>
        <div class="box">04</div>
        <div class="box">05</div>
        <div class="box">06</div>
      </div>
    </div>
  </div>  
</div>

Answer 3

Вы можете использовать col и mr (на полях справа), например:

<div class="container">
  <div class="row">
    <div class="col mr-3">
      1 of 6
    </div>
    <div class="col mr-3">
      2 of 6
    </div>
    <div class="col mr-3">
      3 of 6
    </div>
    <div class="col mr-3">
      4 of 6
    </div>
    <div class="col mr-3">
      5 of 6
    </div>
    <div class="col">
      6 of 6
    </div>
  </div>  
  <div class="row">
    <div class="col mr-3">
      1 of 6
    </div>
    <div class="col mr-3">
      2 of 6
    </div>
    <div class="col mr-3">
      3 of 6
    </div>
    <div class="col mr-3">
      4 of 6
    </div>
    <div class="col mr-3">
      5 of 6
    </div>
    <div class="col">
      6 of 6
    </div>
  </div>  
</div>

https://jsfiddle.net/8g2L5036/2/

Answer 4

Попробуйте это.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<div class="container">
  <div class="row">
    <div class="col">
      1-1
    </div>
    <div class="col">
      1-2
    </div>
    <div class="col">
      1-3
    </div>
    <div class="col">
      1-4
    </div>
    <div class="col">
      1-5
    </div>
    <div class="col">
      1-6
    </div>
  </div>
  <div class="row">
    <div class="col">
      2-1
    </div>
    <div class="col">
      2-2
    </div>
    <div class="col">
      2-3
    </div>
    <div class="col">
      2-4
    </div>
    <div class="col">
      2-5
    </div>
    <div class="col">
      2-6
    </div>
  </div>
</div>