Question

我正在构建一个带有引导程序4的小型仪表板。该结构是两列（5-7），在其中有不同的行和列。

即使总和为12，我也有两行不适合其中的列。

我试图将所有列包装在div列中，但没有任何改变。我尝试通过开发者控制台删除所有填充，但仍然遇到相同的问题。

<div class="col-12 leg_planches">
   <div class="col-2"> 
      <h5 data-toggle="tooltip" data-placement="top" title="Référence" > <i class="fa fa-tint" aria-hidden="true"></i> <span>A1</span></h5>
      <h5 title="Zone géographique"> <i class="fa fa-bolt" aria-hidden="true" ></i> <span></span></h5>
   </div>
   <div class="col-2"> 
      <h5 data-toggle="tooltip" data-placement="top" title="Irrigation" > <i class="fa fa-tint" aria-hidden="true"></i> <span></span></h5>
      <h5 title="Amendements"> <i class="fa fa-bolt" aria-hidden="true" ></i> <span></span></h5>
   </div>
   <div class="col-2">
      <h5 title="Entretient"> <i class="fa fa-broom" aria-hidden="true" ></i> <span></span></h5> 
      <h5 title="Amendements"> <i class="fa fa-gem" aria-hidden="true" ></i> <span></span></h5>
   </div>
   <div class="col-2">
      <h5 title="Estimation poids sur planche"> <i class="fa fa-hand-holding-usd" aria-hidden="true" ></i> <span></span></h5>
      <h5 title="Exporté"> <i class="fa fa-fighter-jet" aria-hidden="true" ></i> <span></span></h5>
   </div>
   <div class="col-2">
      <h5 title="Dépenses"> <i class="fa fa-credit-card" aria-hidden="true" ></i> <span></span></h5>
      <h5 title="Temps de travail"> <i class="fa fa-clock" aria-hidden="true" ></i> <span></span></h5>
   </div>
   <div class="col-2">
      <h5 title="Semé le"> <i class="fa fa-baby" aria-hidden="true" ></i> <span></span></h5>
      <h5 title="Planté le"> <i class="fa fa-baby-carriage" aria-hidden="true" ></i> <span></span></h5>
   </div>
</div>

我希望所有列都按预期的方式放在一行中。

Answer 1

代替col-12，尝试使用row。像这样 <div class="row leg_planches">

Answer 2

只需将col-12替换为row就可以解决您的问题。谢谢

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row leg_planches">
   <div class="col-2"> 
      <h5 data-toggle="tooltip" data-placement="top" title="Référence" > <i class="fa fa-tint" aria-hidden="true"></i> <span>A1</span></h5>
      <h5 title="Zone géographique"> <i class="fa fa-bolt" aria-hidden="true" ></i> <span>B1</span></h5>
   </div>
   <div class="col-2"> 
      <h5 data-toggle="tooltip" data-placement="top" title="Irrigation" > <i class="fa fa-tint" aria-hidden="true"></i> <span>A2</span></h5>
      <h5 title="Amendements"> <i class="fa fa-bolt" aria-hidden="true" ></i> <span>B2</span></h5>
   </div>
   <div class="col-2">
      <h5 title="Entretient"> <i class="fa fa-broom" aria-hidden="true" ></i> <span>A3</span></h5> 
      <h5 title="Amendements"> <i class="fa fa-gem" aria-hidden="true" ></i> <span>B3</span></h5>
   </div>
   <div class="col-2">
      <h5 title="Estimation poids sur planche"> <i class="fa fa-hand-holding-usd" aria-hidden="true" ></i> <span>A4</span></h5>
      <h5 title="Exporté"> <i class="fa fa-fighter-jet" aria-hidden="true" ></i> <span>B4</span></h5>
   </div>
   <div class="col-2">
      <h5 title="Dépenses"> <i class="fa fa-credit-card" aria-hidden="true" ></i> <span>A5</span></h5>
      <h5 title="Temps de travail"> <i class="fa fa-clock" aria-hidden="true" ></i> <span>B5</span></h5>
   </div>
   <div class="col-2">
      <h5 title="Semé le"> <i class="fa fa-baby" aria-hidden="true" ></i> <span>A6</span></h5>
      <h5 title="Planté le"> <i class="fa fa-baby-carriage" aria-hidden="true" ></i> <span>B6</span></h5>
   </div>
</div>

即使列数为12，引导程序中的列也不适合

2 个答案: