【发布时间】：2015-06-19 06:37:08
【问题描述】：
我的 Col-xs 和 col-md 出现问题。
所以在我继续解释我的用途之前。 我正在尝试创建一个用户表单，他们可以在其中输入他们的详细信息，然后输入一件家具的数量。家具部分位于选项卡内容中，因为房屋中有单独的部分。
所以 id like for col-xs 跨越 2 列，一列用于 label 和一列用于 Quantity 输入，然后 ill 慢慢增加 2 列，所以 sm 会显示，label，数量，标签数量等.
col-sm 和 col-lg 工作完美，但 col-xs 和 col-md 不工作，几乎就像被跳过了一样。请帮忙。
这是我的代码...
<div class="container">
<h3>Houseold Inventory</h3>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#lounge" data-toggle="tab">Lounge</a></li>
<li><a href="#dinning" data-toggle="tab">Dinning Room</a></li>
<li><a href="#householdKitchen" data-toggle="tab">Kitchen</a></li>
<li><a href="#bed" data-toggle="tab">Bed Room</a></li>
<li><a href="#study" data-toggle="tab">Study</a></li>
<li><a href="#householdGarden" data-toggle="tab">Garden</a></li>
<li><a href="#domestic" data-toggle="tab">Domestic</a></li>
<li><a href="#householdGarage" data-toggle="tab">Garage</a></li>
<li><a href="#householdGym" data-toggle="tab">Gym Equipment</a></li>
<li><a href="#householdMisc" data-toggle="tab">Miscellaneous</a></li>
<li><a href="#householdBoxes" data-toggle="tab">Boxes</a></li>
<li><a href="#householdExtra" data-toggle="tab">Extras</a></li>
</ul> <!-- nav-tabs END-->
<div class="tab-content">
<div class="tab-pane active" id="lounge">
<h4>Lounge</h4>
<form role="form" class="form-inline">
<div class="row">
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
<div class="col-xs-6 col-sm-2 col-md-2">
<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
</div>
<div>
</div><!--end row-->
</form>
<div>
</div> <!--tab-content end-->
</div> <!--tabbable end-->
<!-- col-sm-6 END-->
</div>我对 Bootstrap 和 Web 布局非常陌生，但欢迎批评。
ps。请原谅布局问题我无法弄清楚为什么代码插入会这样做
pps。检查这个类似的问题对于布局示例：Unanswered Question
pps。这是我的移动问题的图像....
【问题讨论】：
-
"col-xs-12 col-sm-4 col-md-2 col-lg-2" 每个元素（例如）肯定是不对的，你误解了网格已设置（在它与您“点击”之前发生了很多） - 这可能是关于如何使用 bs3 网格的最佳解释：scotch.io/tutorials/understanding-the-bootstrap-3-grid-system
-
您好，好吧，所以我检查了它并添加了 Empty div : ( ) 但是 id 什么也没做，而 evan没有它，它不会改变 xs 或 md
-
一方面，如果
col-md和col-lg相同（例如），您只需定义col-md，col-lg将自动使用为@ 定义的任何内容987654329@。所以在你有col-md-2 col-lg-2的地方你真的只需要col-md-2。 -
另外，这一行有一个错字：
<div class="form-group col-xs-12 col-sm-4 col-md-2col-md-3 col-lg-2"><label>4/S Couch</label></div> -
您好 是的，我发现了这一点，我也刚刚编辑了我的代码，因为它说 col-xs-12 并且说 col-xs-6，请查看。我也完全理解你所说的 md 和 lg 的意思，我完全错过了谢谢
标签： html twitter-bootstrap-3 responsive-design grid-system