Comment puis-je créer six boîtes sur la même ligne avec un espacement entre elles?

J'ai tout essayé, mais pour obtenir la marge entre eux, j'ai dû utiliser des marges très négatives et le design n'était pas réactif :(

Je laisse ici un exemple de ce que je veux

enter image description here

-1
Harry 7 nov. 2019 à 13:09

4 réponses

Meilleure réponse

Essayez d'utiliser la structure de la grille d'amorçage:

.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>
2
Akshita Karetiya 7 nov. 2019 à 10:40

Essaye ça.

<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>
0
Gopinath N 7 nov. 2019 à 11:15

Vous pouvez utiliser col et mr (marge droite) comme:

<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/

1
cplaiuu 7 nov. 2019 à 10:20

Essayez ce lien Jsfiddle ici. Je suggère de ne pas utiliser les classes bootstrap .row et .col s'il ne s'agit pas d'un changement de disposition. Selon le problème expliqué ci-dessus, il s'agit d'une sorte de vue d'éléments, donc je recommande ici d'utiliser des styles CSS flex purs pour organiser ces boîtes.

.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>
1
VSM 7 nov. 2019 à 10:50