每行5列自举程序 - 编程之家

如何解决每行5列自举程序

我试图将5列放在一行中，我尝试使用offset ='1'，但它不起作用。该如何解决？

b-row.mt-5
      b-col(lg='3' offset='1')
        b-button Hi
      b-col(lg='3')
        b-button Hi
      b-col(lg='3')
        b-button Hi
      b-col(lg='3')
        b-button Hi
      b-col(lg='3')
        b-button Hi

解决方法

对于Bootstrap 4，请尝试以下操作：

<div class="row">
        <div class="col">
           1 of 5
        </div>
        <div class="col">
           2 of 5
        </div>
        <div class="col">
           3 of 5
        </div>
        <div class="col">
           4 of 5
        </div>
        <div class="col">
           5 of 5
        </div>
     </div>

我在这里找到它：Five equal columns in twitter bootstrap

您还可以找到以前版本的解决方案

祝你好运

在行上使用.row.row-cols-5，在列上使用.col。 https://getbootstrap.com/docs/4.5/layout/grid/#row-columns

<div class="container">
  <div class="row row-cols-5">
    <div class="col">
      1 of 6
    </div>
    <div class="col">
      2 of 6
    </div>  
    <div class="col">
      3 of 6
    </div>
    <div class="col">
      4 of 6
    </div>
    <div class="col">
      5 of 6
    </div>
    <div class="col">
      6 of 6 (will be wrapped)
    </div>
  </div>  
</div>

对于Bootstrap-3，请使用offset

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

<style>
  .col-inner {
    padding: 40px 20px;
    background: #333;
  }
</style>

<br>

<div class="row">
  <div class="col-xs-2 col-xs-offset-1">
    <div class="col-inner"></div>
  </div>
  <div class="col-xs-2">
    <div class="col-inner"></div>
  </div>
  <div class="col-xs-2">
    <div class="col-inner"></div>
  </div>
  <div class="col-xs-2">
    <div class="col-inner"></div>
  </div>
  <div class="col-xs-2">
    <div class="col-inner"></div>
  </div>
</div>

对于Bootstrap-4，将.justify-content-center类用于行宽.col-*-5类中的 ONLY 5列，您可以根据需要更改屏幕尺寸-

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

<style>
  .col-inner {
    padding: 30px;
    background: #333;
    margin: 15px 0;
  }
</style>

<br>

<div class="row justify-content-center">
  <div class="col-2">
    <div class="col-inner"></div>
  </div>
  <div class="col-2">
    <div class="col-inner"></div>
  </div>
  <div class="col-2">
    <div class="col-inner"></div>
  </div>
  <div class="col-2">
    <div class="col-inner"></div>
  </div>
  <div class="col-2">
    <div class="col-inner"></div>
  </div>
</div>

Bootstrap-4的另一种方式，对{strong> infinite 列使用.row-cols-*，但每行中都有特定数目的列（在这种情况下为5）-

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


<style>
  .col-inner {
    padding: 30px;
    background: #333;
    margin: 15px 0;
  }
</style>

<div class="row row-cols-5">
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
</div>

希望对您有帮助。