LG屏幕上的Bootstrap 1行和MD屏幕上的2行

Question

在Bootstrap中，我希望在一个大屏幕上有一行12个单元格，而对于一个较小的屏幕，我希望有两行有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

Answer 1

＆＃13;

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

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

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

Answer 3

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

见这里：http://jsfiddle.net/x3rowL4g/3/