时间戳

首页 > 解决方案 > 每行引导 5 列

bootstrap-4 - 每行引导 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-4pugbootstrap-vue

解决方案

对于 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中仅使用5 列的.col-*-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 的另一种方法，使用.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>

希望能对你有所帮助。

推荐阅读