为5列布局创建自定义引导下载

进入Bootstrap 2.3.2(或Bootstrap 3)自定义页面，设置以下变量(不要输入分号):

@gridColumns:           5;
@gridColumnWidth:       172px;
@gridColumnWidth1200:   210px;
@gridColumnWidth768:    128px;
@gridGutterWidth768:    21px;

下载您的构建。这个网格将适合默认的容器，(几乎)保留默认的沟槽宽度。

注意:如果你使用LESS，更新变量。而不是更少。

最好的方法

只在行中添加.row-cols-5类。每一行有5个div。

<div class="container-fluid">
    <div class="row row-cols-5">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
        <div class="col">9</div>
        <div class="col">10</div>
    </div>
</div>

使用响应式.row-cols-*类快速设置最能呈现内容和布局的列数。普通的.col-*类应用于单个列(例如，.col-md-4)，而行列类在父.row上设置为快捷方式。

row-cols - * row-cols-sm - * row-cols-md - * row-cols-lg - * row-cols-xl - *

你也可以使用附带的Sass mixin, row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

最简单的方法是在行中添加row-cols-5。点击这里阅读更多

<div class="container">
  <div class="row row-cols-5">
    <div class="col">Col 1</div>
    <div class="col">Col 2</div>
    <div class="col">Col 3</div>
    <div class="col">Col 4</div>
    <div class="col">Col 5</div>
  </div>
</div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="container"> <div class="row row-cols-5"> <div class="col border bg-primary">Col 1</div> <div class="col border bg-primary">Col 2</div> <div class="col border bg-primary">Col 3</div> <div class="col border bg-primary">Col 4</div> <div class="col border bg-primary">Col 5</div> <div class="col border bg-primary">Col 6</div> <div class="col border bg-primary">Col 7</div> </div> </div>

五列显然不是bootstrap设计的一部分。

但是对于Bootstrap v4 (alpha)，有两件事可以帮助处理复杂的网格布局

Flex (http://v4-alpha.getbootstrap.com/getting-started/flexbox/)，新的元素类型(官方- https://www.w3.org/TR/css-flexbox-1/) 响应式实用程序(http://v4-alpha.getbootstrap.com/layout/responsive-utilities/)

简单来说，我在用

<style>
.flexc { display: flex; align-items: center; padding: 0; justify-content: center; }
.flexc a { display: block; flex: auto; text-align: center; flex-basis: 0; }
</style>
<div class="container flexc hidden-sm-down">
  <!-- content to show in MD and larger viewport -->
  <a href="#">Link/Col 1</a>
  <a href="#">Link/Col 2</a>
  <a href="#">Link/Col 3</a>
  <a href="#">Link/Col 4</a>
  <a href="#">Link/Col 5</a>
</div>
<div class="container hidden-md-up">
  <!-- content to show in SM and smaller viewport, I don't think 5 cols in smaller viewport are gonna be alright :) -->
</div>

不管是5 7 9 11 13还是其他概率，都没问题。 我非常确定12网格标准能够服务于90%以上的用例——所以让我们以这种方式设计——也更容易开发!

flex教程在这里“https://css-tricks.com/snippets/css/a-guide-to-flexbox/”

var cols = $(".container .item").length;
if (cols == 5){
    $('div.item').removeClass('col-md-2..etc').addClass('col-md-3').css('width', '20%');
 }

Jquery和完成!框架!

如果你不需要完全相同的列宽度，你可以尝试使用嵌套创建5列:

<div class="container">
    <div class="row">
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-6 column">Column 1</div>
                <div class="col-xs-6 column">Column 2</div>
            </div>
        </div>
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-4 column">Column 3</div>
                <div class="col-xs-4 column">Column 4</div>
                <div class="col-xs-4 column">Column 5</div>
            </div>
        </div>
    </div>
</div>

斯菲德尔

前两列的宽度为5/12 * 1/2 ~ 20.83%

后三列:7/12 * 1/3 ~ 19.44%

这样的hack在许多情况下给出了可接受的结果，不需要任何CSS更改(我们只使用本机引导类)。