我如何使用 bootstrap class 在一行内进行 10 个类似的划分。 (例如 "col-lg-2")
How can i make 10 similar division inside a row using bootstrap class. (e.g "col-lg-2")
我正在与 bootstrap 类 合作。我不想使用写入自定义 css。
那么,如何划分宽度相近的10个分区。所有分区应占据行的整个宽度
<div class="col-lg-12">
<div class="row">
// i need 10 div with similar width
</div>
</div>
我敢肯定,如果不创建自定义 CSS 或自定义 Bootstrap 版本,就无法完成此操作。可行的方法是制作 12 列 .col-md-1 并将最外层的左列和右列留空。
在 bootstrap 的源代码中,在 variables
文件中,有一个名为 @grid-columns
的变量($grid-columns
如果您使用 sass 版本), 只需将其更改为 10 并重新编译 bootstrap.
如果您需要混合 10 和 12 列,请使用 60 列并相应相乘
您可能还想看看 grid-gutter-width
、grid-float-breakpoint
和所有 screen-*
尺寸,它们可能需要根据您的需要进行调整。
ICYMI: 这里是 link 到 less 编译器页面 http://lesscss.org/
我认为最好的解决方案是使用自定义版本 bootstrap http://getbootstrap.com/customize/#grid-system 设置 @grid-columns = 20 并使用 col-sm-2 10 次
我正在与 bootstrap 类 合作。我不想使用写入自定义 css。 那么,如何划分宽度相近的10个分区。所有分区应占据行的整个宽度
<div class="col-lg-12">
<div class="row">
// i need 10 div with similar width
</div>
</div>
我敢肯定,如果不创建自定义 CSS 或自定义 Bootstrap 版本,就无法完成此操作。可行的方法是制作 12 列 .col-md-1 并将最外层的左列和右列留空。
在 bootstrap 的源代码中,在 variables
文件中,有一个名为 @grid-columns
的变量($grid-columns
如果您使用 sass 版本), 只需将其更改为 10 并重新编译 bootstrap.
如果您需要混合 10 和 12 列,请使用 60 列并相应相乘
您可能还想看看 grid-gutter-width
、grid-float-breakpoint
和所有 screen-*
尺寸,它们可能需要根据您的需要进行调整。
ICYMI: 这里是 link 到 less 编译器页面 http://lesscss.org/
我认为最好的解决方案是使用自定义版本 bootstrap http://getbootstrap.com/customize/#grid-system 设置 @grid-columns = 20 并使用 col-sm-2 10 次