Twitter引导程序中的五个相等的列 [英] Five equal columns in twitter bootstrap

问题描述

我要在要构建的页面上有5个相等的列，但我似乎不明白如何在这里使用5列网格: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/response

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

在Twitter引导程序框架的上方是否演示了五列网格?

Is the five column grid being demonstrated above part of the twitter bootstrap framework?

推荐答案

对于Bootstrap 3及更高版本

使用Twitter Bootstrap创建了一个奇妙的全宽 5列布局这是迄今为止最先进的解决方案，因为它可以与Bootstrap 3无缝协作.它允许您一次又一次地重复使用这些类，并与当前的Bootstrap类结合使用，以进行响应式设计.

This is by far the most advanced solution since it works seamlessly with Bootstrap 3. It allows you to re-use the classes over and over again, in pair with the current Bootstrap classes for responsive design.

CSS:
将此添加到全局样式表，甚至添加到bootstrap.css文档的底部.

CSS:
Add this to your global stylesheet, or even to the bottom of your bootstrap.css document.

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

放置它！
例如，如果您要创建一个div元素，其在中等屏幕上的行为类似于五列布局，而在较小屏幕上的行为类似于两列，您只需需要使用这样的东西:

Put it to use!
For example, if you want to create a div element that behaves like a five column layout on medium screens and like two columns on smaller ones, you just need to use something like this:

<div class="row">
    <div class="col-md-5ths col-xs-6">
       ...
    </div>
</div>

工作演示 -展开框架以查看列是否具有响应性

WORKING DEMO - Expand the frame to see the columns become responsive.

另一个演示 -将新的col-*-5ths类与其他类合并例如col-*-3和col-*-2.调整框架的大小，以在响应式视图中将它们全部更改为col-xs-6.

ANOTHER DEMO - Incorporating the new col-*-5ths classes with others such as col-*-3 and col-*-2. Resize the frame to see them all change to col-xs-6 in responsive view.

Bootstrap 4现在默认情况下使用flexbox，因此您可以立即使用其神奇的功能.查看自动布局列，该列可根据以下情况动态调整宽度嵌套多少列.

Bootstrap 4 now uses flexbox by default, so you get access to its magical powers straight out of the box. Check out the auto layout columns that dynamically adjust width depending on how many columns are nested.

这是一个例子:

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

工作演示

这篇关于Twitter引导程序中的五个相等的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！