Bootstrap 3 col-xs和col-md没有响应
我的Col-xs和我的col-md有问题。
所以在我继续生病解释我的用法之前。 我试图创建一个用户表单，在那里他们可以输入他们的详细信息，然后输入一件家具的数量。家具部分位于Tab-Content内，因为房屋内有不同的部分。
所以id就像col-xs跨越2列，一列用于标签，一列用于数量输入，然后慢慢增加2列，因此sm将显示，标签，数量，标签数量等等
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。检查此Similer问题对于布局示例：Unanswered Question
PPSS。这是我的移动问题的图像....
3 个答案:
答案 0 :(得分：2)
你的初始布局非常接近。我看到的唯一问题是您在某些col-md-*元素上复制了几个<div>课程：
<div class="form-group col-xs-6 col-sm-4 col-md-2col-md-3 col-lg-2"><label>4/S Couch</label></div>
注意你在那里有col-md-2col-md-3？那不行。此外，对于您的某些元素，您的<label>父母有col-md-2，而<input>的父母有col-md-2，而其他人有col-md-3 {1}}和col-md-1。这不均匀并导致问题排列。我假设col-md-3和col-md-1是正确的（如果我错了，您可以随时将其更改为col-md-2和col-md-2）并将您的布局编辑为以下内容：
<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 col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Corner Piece</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end corner piece -->
<div class="clearfix visible-xs-block"></div>
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>4/S Couch</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end 4/S Couch -->
<div class="clearfix visible-xs-block"></div>
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>3/S Couch</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end 3/S Couch -->
<div class="clearfix visible-xs-block"></div>
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>2/S Couch</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end 2/S Couch -->
<div class="clearfix visible-xs-block"></div>
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Armchairs</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end armchairs -->
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Recliner Chairs</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end recliner chairs -->
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Riempie Chairs</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end riempie chairs -->
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Sleeper Couch</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end sleeper couch -->
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Coffee Table</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end coffee table -->
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Occ.Table</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end occ table -->
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Hall Stand</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end hall stand -->
<div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Hat Stand</label></div>
<div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
<input class="form-control" placeholder="QTY" style="width:60px;" type="text">
</div><!-- end hat stand -->
</div><!--end row-->
</form>
<div>
</div> <!--tab-content end-->
</div> <!--tabbable end-->
<!-- col-sm-6 END-->
</div>
</div>
</div>
请参阅此Bootply Example以查看此布局（仅调整浏览器大小）。
答案 1 :(得分：1)
你的结构有点偏。应该更像这样：
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-xs-6 col-sm-4 col-md-2 control-label">Corner Piece</label>
<div class="col-xs-6 col-sm-2 col-md-2 col-lg-1">
<input type="text" class="form-control" placeholder="QTY">
</div>
</div>
<!-- end corner piece -->
<div class="form-group">
<label class="col-xs-6 col-sm-4 col-md-2 control-label">4/S Couch</label>
<div class="col-xs-6 col-sm-2 col-md-2 col-lg-1">
<input type="text" class="form-control" placeholder="QTY">
</div>
</div>
<!-- end 4/S Couch -->
<div class="form-group">
<label class="col-xs-6 col-sm-4 col-md-2 control-label">My Label</label>
<div class="col-xs-6 col-sm-2 col-md-2 col-lg-1">
<input type="text" class="form-control" placeholder="QTY">
</div>
</div>
</form>
HTH：）
答案 2 :(得分：0)
我已经弄清楚了。
一些我的Bootstrap css文件没有正确读取，一旦我安装了 NuGet包，一切都很好，现在我的 xs 和 md 正如预期的那样完美地工作。
感谢所有帮助过的人。
相关问题
- col-lg-4和col-md-3和col-xs-3有什么区别？
- col-xs大小以col-md大小工作
- Bootstrap 3 col-xs和col-md没有响应
- col-md，用于Bootstrap中高度的col-xs
- 影响col-xs视口的col-md类
- Bootstrap col-xs和col-sm
- 为什么在bootstrap中使用多个col- [lg | md | sm | xs]？
- bootstrap col-md-4和col-xs-6不兼容
- 无线电内联应仅适用于col-lg- *，col-md- *，col-sm- *，但不适用于col-xs- *
- bootstrap col-xs- *不起作用
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？