Twitter引导程序中的五个相等的列_web框架:twitter引导程序,引导程序-优快云博客

本文详细介绍如何在Bootstrap框架下实现五列等宽布局，包括调整变量、自定义下载及利用CSS修改等方法，适用于不同版本的Bootstrap。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文翻译自：Five equal columns in twitter bootstrap

I want to have 5 equal columns on a page I am building and I can't seem to understand how the 5 column grid is being used here: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive 我想在正在构建的页面上有5个相等的列，但我似乎无法理解此处如何使用5列网格： http : //web.archive.org/web/20120416024539/http : //domain7 .com / mobile / tools / bootstrap / response

Is the five column grid being demonstrated above part of the twitter bootstrap framework? 在Twitter引导程序框架的上方是否演示了五列网格？

#1楼

参考：https://stackoom.com/question/haKC/Twitter引导程序中的五个相等的列

#2楼

Create a custom Bootstrap download for 5 column layout 创建用于5列布局的自定义Bootstrap下载

Go to Bootstrap 2.3.2 (or Bootstrap 3 ) customization page and set the following variables (don't input semicolons): 转到Bootstrap 2.3.2 （或Bootstrap 3 ）自定义页面，并设置以下变量（不输入分号）：

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

Download your build. 下载您的版本。 This grid would fit into default containers, preserving default gutter widths (almost). 此网格将适合默认容器，并保留默认装订线宽度（几乎）。

Note: If you are using LESS, update variables.less instead. 注意：如果您使用的是LESS，请改为更新variables.less 。

#3楼

Use five divs with a class of span2 and give the first a class of offset1. 将五个div与span2类一起使用，并为第一个给定offset1类。

<div class="row-fluid">
    <div class="span2 offset1"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

Voila! 瞧！ Five equally spaced and centered columns. 五列等距居中的列。

In bootstrap 3.0, this code would look like 在bootstrap 3.0中，这段代码看起来像

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

#4楼

<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 20%;
}

#5楼

I voted up Mafnah's answer but looking at this again I'd suggest the following is better if you're keeping the default margins etc. 我对Mafnah的回答投了赞成票，但再次查看一下，如果您保留默认边距等，我建议以下方法会更好。

<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 17.9%;
}

#6楼

Keep the original bootstrap with 12 columns, do not customize it. 将原始引导程序保留为12列，请勿对其进行自定义。 The only modification you need to make is some css after the original bootstrap responsive css, like this: 您需要进行的唯一修改是在原始引导响应式CSS 之后添加一些CSS，如下所示：

The following code has been tested for Bootstrap 2.3.2: 以下代码已针对Bootstrap 2.3.2进行了测试：

<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px){
    .fivecolumns .span2 {
        width: 18.297872340425532%;
        *width: 18.2234042553191494%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .span2 {
        width: 17.9487179487179488%;
        *width: 17.87424986361156592%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .span2 {
        width: 17.79005524861878448%;
        *width: 17.7155871635124022%;
    }
}
/* end of modification for 5 columns */
</style>

And the html: 和html：

<div class="row-fluid fivecolumns">
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
</div>

Note: Even though the span2 times 5 doesn't equal 12 columns, you get the idea :) 注意：即使span2乘以5并不等于12列，您还是可以理解的：)

A working example can be found here http://jsfiddle.net/v3Uy5/6/ 一个有效的示例可以在这里找到http://jsfiddle.net/v3Uy5/6/