在 Bootstrap 3 中创建基础样式的块网格？
Posted
技术标签:
【中文标题】在 Bootstrap 3 中创建基础样式的块网格？【英文标题】：Creating a Foundation-style Block Grid in Bootstrap 3? 【发布时间】：2014-06-05 22:53:31 【问题描述】：在 Zurb Foundation 3+ 中，它们具有“块网格”的 CSS 构造，这是一个无序列表，您可以在其中指定一行中的项目数。
Here's their docs on it.
在 Bootstrap 3 中我看不到这样做；只有列。我希望能够将重复元素（例如 LI）轻松显示为响应式网格，我可以在其中指定断点跨越的数量，就像在 Foundation 中一样。
我想我可以自己动手，但想看看是否有人有建议或以前遇到过这个问题。
【问题讨论】：
我已经多次使用 Bootstrap/Wordpress 遇到过这个确切的问题。通常我会为我的 li 设置一个带有计数器的 foreach 循环。如果它等于 0，我将回显一个新行，当计数器等于布局中我想要的列数时，我将回显该行的结束标记并重置计数器。 【参考方案1】：我也希望这是 BS3 中的功能。您必须创建自己的解决方案。
我的典型解决方法就像 Foundation 所做的那样，通过使用百分比来定义宽度、第 n 个子选择器和调整边距。
[class*="block-grid-"]
display: block;
padding: 0;
margin: 0 -0.55556rem;
[class*="block-grid-"] > li
display: block;
height: auto;
float: left;
padding: 0 0.55556rem 1.11111rem;
.small-block-grid-3 > li
width: 33.33333%;
list-style: none;
.small-block-grid-3 > li:nth-of-type(1n)
clear: none;
.small-block-grid-3 > li:nth-of-type(3n+1)
clear: both;
【讨论】：
使用引导程序 2.3.x。第三个元素换行到下一行。我将 small-block-grid-3 > li 中的宽度更改为 30%，问题就解决了。 你是如何使用这个的？<ul class="block-grid-3"><li class="small-block-grid-3"></li></ul>
.small-block-grid-3 > li:nth-of-type(1n) 的意义何在？这只是选择每个列表项，所以clear: none; 应该位于.small-block-grid-3 > li【参考方案2】：
在 Bootstrap 3 中快速而脏的 LESS 文件生成块网格（1 到 @grid-columns）。仍然需要制作响应式类（如 block-grid-sm-3 block-grid-lg-6）。
// Bootstrap variables and mixisn
@import "bootstrap/less/variables.less";
@import "bootstrap/less/mixins.less";
.block-grid ()
padding: 0;
& > li
display: block;
float: left;
list-style: none;
.make-block-grid (@columns, @spacing: @grid-gutter-width) when (@columns > 0)
.block-grid-@columns
&:extend(.clearfix all);
.block-grid();
margin: 0 (-@spacing / 2);
> li
width: 100% / @columns;
padding: 0 (@spacing / 2) @spacing;
&:nth-of-type(1n) clear: none;
&:nth-of-type(@columnsn+1) clear: both;
.make-block-grid(@columns - 1)
.make-block-grid(@grid-columns);
【讨论】：
【参考方案3】：这是一个响应式版本gremo的回答：
.make-block-grid(@class, @columns: @grid-columns, @spacing: @grid-gutter-width) when (@columns > 0)
.block-grid-@class-@columns
.clearfix;
padding: 0;
margin: 0 (-@spacing / 2);
& > li
display: block;
float: left;
width: 100% / @columns;
padding: 0 (@spacing / 2) @spacing;
list-style: none;
&:nth-of-type(1n)
clear: none;
&:nth-of-type(@columnsn+1)
clear: both;
.make-block-grid(@class, @columns - 1);
.make-block-grid(xs);
@media (min-width: @screen-sm-min)
.make-block-grid(sm);
@media (min-width: @screen-md-min)
.make-block-grid(md);
@media (min-width: @screen-lg-min)
.make-block-grid(lg);
【讨论】：
谢谢你，斯特凡！这正是我所需要的。【参考方案4】：这个 css 对我有用：
class*="block-grid-"]
display: block;
padding: 0;
margin: 0 -0.625rem;
*zoom: 1;
[class*="block-grid-"]:before, [class*="block-grid-"]:after
content: " ";
display: table;
[class*="block-grid-"]:after
clear: both;
[class*="block-grid-"] > li
display: inline;
height: auto;
float: left;
padding: 0 0.625rem 1.25rem;
@media only screen
.small-block-grid-1 > li
width: 100%;
padding: 0 0.625rem 1.25rem;
.small-block-grid-1 > li:nth-of-type(n)
clear: none;
.small-block-grid-1 > li:nth-of-type(1n+1)
clear: both;
.small-block-grid-2 > li
width: 50%;
padding: 0 0.625rem 1.25rem;
.small-block-grid-2 > li:nth-of-type(n)
clear: none;
.small-block-grid-2 > li:nth-of-type(2n+1)
clear: both;
.small-block-grid-3 > li
width: 33.33333%;
padding: 0 0.625rem 1.25rem;
.small-block-grid-3 > li:nth-of-type(n)
clear: none;
.small-block-grid-3 > li:nth-of-type(3n+1)
clear: both;
.small-block-grid-4 > li
width: 25%;
padding: 0 0.625rem 1.25rem;
.small-block-grid-4 > li:nth-of-type(n)
clear: none;
.small-block-grid-4 > li:nth-of-type(4n+1)
clear: both;
.small-block-grid-5 > li
width: 20%;
padding: 0 0.625rem 1.25rem;
.small-block-grid-5 > li:nth-of-type(n)
clear: none;
.small-block-grid-5 > li:nth-of-type(5n+1)
clear: both;
.small-block-grid-6 > li
width: 16.66667%;
padding: 0 0.625rem 1.25rem;
.small-block-grid-6 > li:nth-of-type(n)
clear: none;
.small-block-grid-6 > li:nth-of-type(6n+1)
clear: both;
.small-block-grid-7 > li
width: 14.28571%;
padding: 0 0.625rem 1.25rem;
.small-block-grid-7 > li:nth-of-type(n)
clear: none;
.small-block-grid-7 > li:nth-of-type(7n+1)
clear: both;
.small-block-grid-8 > li
width: 12.5%;
padding: 0 0.625rem 1.25rem;
.small-block-grid-8 > li:nth-of-type(n)
clear: none;
.small-block-grid-8 > li:nth-of-type(8n+1)
clear: both;
.small-block-grid-9 > li
width: 11.11111%;
padding: 0 0.625rem 1.25rem;
.small-block-grid-9 > li:nth-of-type(n)
clear: none;
.small-block-grid-9 > li:nth-of-type(9n+1)
clear: both;
.small-block-grid-10 > li
width: 10%;
padding: 0 0.625rem 1.25rem;
.small-block-grid-10 > li:nth-of-type(n)
clear: none;
.small-block-grid-10 > li:nth-of-type(10n+1)
clear: both;
.small-block-grid-11 > li
width: 9.09091%;
padding: 0 0.625rem 1.25rem;
.small-block-grid-11 > li:nth-of-type(n)
clear: none;
.small-block-grid-11 > li:nth-of-type(11n+1)
clear: both;
.small-block-grid-12 > li
width: 8.33333%;
padding: 0 0.625rem 1.25rem;
.small-block-grid-12 > li:nth-of-type(n)
clear: none;
.small-block-grid-12 > li:nth-of-type(12n+1)
clear: both;
@media only screen and (min-width: 40.063em)
.medium-block-grid-1 > li
width: 100%;
padding: 0 0.625rem 1.25rem;
.medium-block-grid-1 > li:nth-of-type(n)
clear: none;
.medium-block-grid-1 > li:nth-of-type(1n+1)
clear: both;
.medium-block-grid-2 > li
width: 50%;
padding: 0 0.625rem 1.25rem;
.medium-block-grid-2 > li:nth-of-type(n)
clear: none;
.medium-block-grid-2 > li:nth-of-type(2n+1)
clear: both;
.medium-block-grid-3 > li
width: 33.33333%;
padding: 0 0.625rem 1.25rem;
.medium-block-grid-3 > li:nth-of-type(n)
clear: none;
.medium-block-grid-3 > li:nth-of-type(3n+1)
clear: both;
.medium-block-grid-4 > li
width: 25%;
padding: 0 0.625rem 1.25rem;
.medium-block-grid-4 > li:nth-of-type(n)
clear: none;
.medium-block-grid-4 > li:nth-of-type(4n+1)
clear: both;
.medium-block-grid-5 > li
width: 20%;
padding: 0 0.625rem 1.25rem;
.medium-block-grid-5 > li:nth-of-type(n)
clear: none;
.medium-block-grid-5 > li:nth-of-type(5n+1)
clear: both;
.medium-block-grid-6 > li
width: 16.66667%;
padding: 0 0.625rem 1.25rem;
.medium-block-grid-6 > li:nth-of-type(n)
clear: none;
.medium-block-grid-6 > li:nth-of-type(6n+1)
clear: both;
.medium-block-grid-7 > li
width: 14.28571%;
padding: 0 0.625rem 1.25rem;
.medium-block-grid-7 > li:nth-of-type(n)
clear: none;
.medium-block-grid-7 > li:nth-of-type(7n+1)
clear: both;
.medium-block-grid-8 > li
width: 12.5%;
padding: 0 0.625rem 1.25rem;
.medium-block-grid-8 > li:nth-of-type(n)
clear: none;
.medium-block-grid-8 > li:nth-of-type(8n+1)
clear: both;
.medium-block-grid-9 > li
width: 11.11111%;
padding: 0 0.625rem 1.25rem;
.medium-block-grid-9 > li:nth-of-type(n)
clear: none;
.medium-block-grid-9 > li:nth-of-type(9n+1)
clear: both;
.medium-block-grid-10 > li
width: 10%;
padding: 0 0.625rem 1.25rem;
.medium-block-grid-10 > li:nth-of-type(n)
clear: none;
.medium-block-grid-10 > li:nth-of-type(10n+1)
clear: both;
.medium-block-grid-11 > li
width: 9.09091%;
padding: 0 0.625rem 1.25rem;
.medium-block-grid-11 > li:nth-of-type(n)
clear: none;
.medium-block-grid-11 > li:nth-of-type(11n+1)
clear: both;
.medium-block-grid-12 > li
width: 8.33333%;
padding: 0 0.625rem 1.25rem;
.medium-block-grid-12 > li:nth-of-type(n)
clear: none;
.medium-block-grid-12 > li:nth-of-type(12n+1)
clear: both;
@media only screen and (min-width: 64.063em)
.large-block-grid-1 > li
width: 100%;
padding: 0 0.625rem 1.25rem;
.large-block-grid-1 > li:nth-of-type(n)
clear: none;
.large-block-grid-1 > li:nth-of-type(1n+1)
clear: both;
.large-block-grid-2 > li
width: 50%;
padding: 0 0.625rem 1.25rem;
.large-block-grid-2 > li:nth-of-type(n)
clear: none;
.large-block-grid-2 > li:nth-of-type(2n+1)
clear: both;
.large-block-grid-3 > li
width: 33.33333%;
padding: 0 0.625rem 1.25rem;
.large-block-grid-3 > li:nth-of-type(n)
clear: none;
.large-block-grid-3 > li:nth-of-type(3n+1)
clear: both;
.large-block-grid-4 > li
width: 25%;
padding: 0 0.625rem 1.25rem;
.large-block-grid-4 > li:nth-of-type(n)
clear: none;
.large-block-grid-4 > li:nth-of-type(4n+1)
clear: both;
.large-block-grid-5 > li
width: 20%;
padding: 0 0.625rem 1.25rem;
.large-block-grid-5 > li:nth-of-type(n)
clear: none;
.large-block-grid-5 > li:nth-of-type(5n+1)
clear: both;
.large-block-grid-6 > li
width: 16.66667%;
padding: 0 0.625rem 1.25rem;
.large-block-grid-6 > li:nth-of-type(n)
clear: none;
.large-block-grid-6 > li:nth-of-type(6n+1)
clear: both;
.large-block-grid-7 > li
width: 14.28571%;
padding: 0 0.625rem 1.25rem;
.large-block-grid-7 > li:nth-of-type(n)
clear: none;
.large-block-grid-7 > li:nth-of-type(7n+1)
clear: both;
.large-block-grid-8 > li
width: 12.5%;
padding: 0 0.625rem 1.25rem;
.large-block-grid-8 > li:nth-of-type(n)
clear: none;
.large-block-grid-8 > li:nth-of-type(8n+1)
clear: both;
.large-block-grid-9 > li
width: 11.11111%;
padding: 0 0.625rem 1.25rem;
.large-block-grid-9 > li:nth-of-type(n)
clear: none;
.large-block-grid-9 > li:nth-of-type(9n+1)
clear: both;
.large-block-grid-10 > li
width: 10%;
padding: 0 0.625rem 1.25rem;
.large-block-grid-10 > li:nth-of-type(n)
clear: none;
.large-block-grid-10 > li:nth-of-type(10n+1)
clear: both;
.large-block-grid-11 > li
width: 9.09091%;
padding: 0 0.625rem 1.25rem;
.large-block-grid-11 > li:nth-of-type(n)
clear: none;
.large-block-grid-11 > li:nth-of-type(11n+1)
clear: both;
.large-block-grid-12 > li
width: 8.33333%;
padding: 0 0.625rem 1.25rem;
.large-block-grid-12 > li:nth-of-type(n)
clear: none;
.large-block-grid-12 > li:nth-of-type(12n+1)
clear: both; <ul class="small-block-grid-2 large-block-grid-4">
<li><img src="../assets/img/examples/comet-th.jpg"></li>
<li><img src="../assets/img/examples/launch-th.jpg"></li>
<li><img src="../assets/img/examples/space-th.jpg"></li>
<li><img src="../assets/img/examples/spacewalk-th.jpg"></li>
</ul>【讨论】：
以上是关于在 Bootstrap 3 中创建基础样式的块网格？的主要内容，如果未能解决你的问题，请参考以下文章