Bootstrap 3 col-xs 和 col-md 没有响应
Bootstrap 3 col-xs and col-md Is not Responding
我的 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。这是我的移动问题的图像....
你的结构有点不对劲。应该更像这样:
<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:)
您的初始布局非常接近。我看到的唯一问题是您在某些 <div>
元素上复制了一对 col-md-*
类:
<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
和 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 以查看此布局的实际效果(只需调整浏览器大小)。
我想通了。
我的 Bootstrap css 文件没有被正确读取,一旦我安装了 NuGet 包 ,一切都很好,现在我的 xs 和 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。这是我的移动问题的图像....
你的结构有点不对劲。应该更像这样:
<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:)
您的初始布局非常接近。我看到的唯一问题是您在某些 <div>
元素上复制了一对 col-md-*
类:
<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
和 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 以查看此布局的实际效果(只需调整浏览器大小)。
我想通了。
我的 Bootstrap css 文件没有被正确读取,一旦我安装了 NuGet 包 ,一切都很好,现在我的 xs 和 md 工作正常,符合预期。
感谢所有帮助过的人。