Twitter引導程序中的五個相等的列

本文翻譯自：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/