Question

我正在使用bootstrap作为我的布局，但是当从col-sm-4的3列到col-xs-6的2列时出现问题，它在第3列之后留下了空白项目。任何想法如何解决这个问题，所以布局从3列到2个以xs为单位？

＆＃13;

/** Style to illustrate the issue */

.red {
  background-color: red;
}

.green{
  background-color:green;
}

.blue{
  background-color:blue;
}

.sample {
  min-height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>


<div class="col-sm-4 col-xs-6 sample red">1</div>
<div class="col-sm-4 col-xs-6 sample blue">2</div>
<div class="col-sm-4 col-xs-6 sample green">3</div>

＆＃13;

Answer 1

您的列必须始终加起来为12.您的“sm”设置（3x4 = 12）就是这种情况，但不适用于“xs”设置。

在“xs”中，您现在将拥有3x“50％”列（col-xs-6），因此第3行将转到下一行，留下50％的空白。

如果您想要“xs”尺寸的2列，则必须将2列添加到col-xs-6并在其中一列上设置col-hidden-xs以隐藏该列。

col-sm-4的Bootstrap行在col-xs-6处留下空白区域

1 个答案: