Bootstrap LG 屏幕上 1 行，MD 屏幕上 2 行答案

【问题标题】：Bootstrap 1 row on LG screens and 2 rows on MD screensBootstrap LG 屏幕上 1 行，MD 屏幕上 2 行
【发布时间】：2015-11-30 20:50:17
【问题描述】：

在 Bootstrap 中，我希望在大屏幕上有 1 行 12 个单元格，而对于较小的屏幕，我希望有 2 行 6 个单元格。

一个很好理解的模式：

我试过了：

<div class="col-xs-1 "><br/></div> 
<div class="col-lg-1 col-xs-2">
    <h1>1</h1>
</div>
<div class="col-lg-1 col-xs-2 ">
    <h1>2</h1>
</div>
<div class="col-lg-1 col-xs-2 ">
    <h1>3</h1>
</div>
<div class="col-lg-1 col-xs-2 ">
    <h1>4</h1>
</div>
<div class="col-lg-1 col-xs-2 ">
    <h1>5</h1>
</div>

<div class="col-xs-1 hidden-lg "><br/></div> 
<div class="col-xs-1 hidden-lg "><br/></div> 

<div class="col-lg-1 col-xs-2 ">
    <h1>6</h1>
</div>
<div class="col-lg-1 col-xs-2">
    <h1>7</h1>
</div>
<div class="col-lg-1 col-xs-2 ">
    <h1>8</h1>
</div>
<div class="col-lg-1 col-xs-2 ">
    <h1>9</h1>
</div>
<div class="col-lg-1 col-xs-2 ">
    <h1>10</h1>
</div>
<div class="col-xs-1 "><br/></div>

但我得到的，是这样的：

我不知道为什么，但这两个单元格是堆叠在一起的：

<div class="col-xs-1 hidden-lg "><br/></div> 
<div class="col-xs-1 hidden-lg "><br/></div>

我不明白为什么。

看看这个小提琴：Fiddle OK

当我在某些单元格上有 0 时，这是可行的，但如果我想删除 0 以仅拥有空单元格，则会失败：Fiddle FAIL

【问题讨论】：

在<div>s 开头的.col-lg-offset-1 的div 怎么样？

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

解决方案：好的，我在第二个空单元格中添加style="clear:both;" 解决了这个问题

请看这里：http://jsfiddle.net/x3rowL4g/3/

【讨论】：

【解决方案2】：

只需使用col-lg-1 col-md-2。

可以在this jsfiddle 找到演示。（确保调整 result 窗口的大小）

【讨论】：

这不是我要的。我只有 10 个包含内容的单元格（不是 12 个作为您的示例）和一些空单元格。而这些空单元格造成了这个问题。
看看你的 Fiddle 和我的例子：jsfiddle.net/x3rowL4g/1 我会这样做，但如果你删除 0 并让单元格为空，那就失败了。
@dramixx 抱歉！这些是否需要明确为空单元格（如div，或者一个单元格宽度的间隙是否足够（col-lg-offset-1 的解决方案）？

【解决方案3】：

.row>div {border:1px solid #000;height:20px;}
@media (min-width:992px) and (max-width:1199px) {
.row>div:nth-child(6) {clear:left} /* to put the 6th block in new row */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row text-center">
 		<div class="col-lg-1 col-md-2">1</div>
 		<div class="col-lg-1 col-md-2">2</div>
 		<div class="col-lg-1 col-md-2">3</div>
 		<div class="col-lg-1 col-md-2">4</div>
 		<div class="col-lg-1 col-md-2">5</div>
 		<div class="col-lg-1 col-md-2">6</div>
 		<div class="col-lg-1 col-md-2">7</div>
 		<div class="col-lg-1 col-md-2">8</div>
 		<div class="col-lg-1 col-md-2">9</div>
 		<div class="col-lg-1 col-md-2">10</div>
    </div>
</div>

我不知道你的问题是否正确，但如果我想解释的是，那么你只需要添加这一行。

【讨论】：