每行5列引导[重复]

Question

我尝试在一行中放置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 

Answer 1

对于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>

Answer 2

使用。一行行上的row-cols-5和。列的列。https://getbootstrap.com/docs/4.5/layout/grid/#row-纵队

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

Answer 3

对于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>

我在这里找到的：推特引导中的五列相等

在那里你可以找到也解决方案为以前的版本

祝你好运