我需要Bootstrap Grid系统的帮助（col-md，col-sm，col-lg等） 当屏幕分辨率较小时，我的网格会不断变形。所有这些分辨率都来自台式机和笔记本电脑，没有平板电脑/手机。
我知道col-sm的分辨率高达750px，而col-d高达970px。 不应该涵盖测试的分辨率吗？
以下是示例。
决议：1280x1024 一切看起来都应该如此。
分辨率：1024x600 标签和输入未对齐且失真。
与内联方法
相同HTML：
<div class="panel-group">
<div class="panel">
<div class="panel-body">
<div class="row col-sm-12 col-md-12">
<div class="col-sm-3 col-md-3 verticalline">
<div class="form-group">
<label class="col-sm-4 col-md-4 control-label">
Cust PO #
</label>
<div class="col-sm-8 col-md-8">
<input type="text" class="form-control textlabellook" id="custpotxt" name="custpotxt" value=""/>
</div>
</div>
<div class="form-group">
<div class="col-sm-12 col-md-12">
<p class="middle"><b>Customer License Contact Info</b></p>
</div>
</div>
<div class="form-group">
<label class="col-xs-4 col-sm-4 col-md-4 control-label">
Cust Name
</label>
<div class="col-xs-8 col-sm-8 col-md-8">
<p class="form-control-static"><input type="text" class="form-control textlabellook" id="suppnametxt" name="suppnametxt" placeholder="Name..." value="" /></p>
</div>
</div>
<div class="form-group">
<label class="col-xs-4 col-sm-5 col-md-5 control-label">
Cust Phone #
</label>
<div class="col-xs-7 col-sm-7 col-md-7">
<p class="form-control-static"><input type="text" class="form-control textlabellook" id="suppphonetxt" placeholder="Phone #..." name="suppphonetxt" value="" onkeypress="return numbersonly(event, false)"/></p>
</div>
</div>
<div class="form-group">
<label class="col-xs-4 col-sm-4 col-md-4 control-label">
Cust Email
</label>
<div class="col-xs-8 col-sm-8 col-md-8">
<p class="form-control-static"><input type="text" class="form-control textlabellook email" id="suppemailtxt" name="suppemailtxt" placeholder="Email..." value="" /></p>
</div>
</div>
</div
<div class="col-sm-3 col-md-3 verticalline">
<!-- stuff in here -->
</div>
<div class="col-sm-3 col-md-3 verticalline">
<!-- stuff in here -->
</div>
<div class="col-sm-3 col-md-3">
<!-- stuff in here -->
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
您将columns和rows混合在一起，列位于rows内。并且您不需要那些基本上重复的列。请参阅docs和示例。
<强>更新
您可以嵌套列/行，以便在屏幕上排列所有输入/显示项目。见Nesting Forms
我有两个版本：一个带内联标签，另一个没有。
请参阅下面的工作示例。
/**FORM 1 INLINE LABEL**/
#theForm,
#theForm2 {
font-size: 11px;
font-weight: bold;
color: #266080;
}
.no-gutter >[class*='col-'] {
padding-right: 15px;
padding-left: 15px;
margin-top: 0;
margin-bottom: 0;
}
.middle {
margin-top: 10px;
margin-bottom: 10px;
}
.black {
border-bottom: 6px solid black;
}
@media (max-width: 768px) {
.red {
border-bottom: 6px solid red;
margin: 10px 0;
}
}
/**FORM 2 BLOCK LABEL**/
.no-gutter2 >[class*='col-'] {
padding-right: 15px;
padding-left: 15px;
margin-top: 3px;
margin-bottom: 3px;
}
.middle {
margin-top: 10px;
margin-bottom: 10px;
}
.blue {
border-bottom: 3px solid lightblue;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<form id="theForm">
<div class="container">
<h2>Inline Label Nested Form</h2>
<div class="row black">
<!-- START CONTAINER-->
<div class="col-sm-3">
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Cust PO #</label>
</div>
</div>
<div class="col-xs-8">
<div class="form-group">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<p class="middle text-center"><b>Customer License Contact Info</b>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Cust PO #</label>
</div>
</div>
<div class="col-xs-8">
<div class="form-group">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Cust PO #</label>
</div>
</div>
<div class="col-xs-8">
<div class="form-group">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Cust PO #</label>
</div>
</div>
<div class="col-xs-8">
<div class="form-group">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
</div>
</div>
</div>
<!-- END CONTAINER-->
<div class="red"></div>
<!-- START CONTAINER-->
<div class="col-sm-3">
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Cust PO #2</label>
</div>
</div>
<div class="col-xs-8">
<div class="form-group">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<p class="middle text-center"><b>Customer License Contact Info</b>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Cust PO #</label>
</div>
</div>
<div class="col-xs-8">
<div class="form-group">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Cust PO #</label>
</div>
</div>
<div class="col-xs-8">
<div class="form-group">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Cust PO #</label>
</div>
</div>
<div class="col-xs-8">
<div class="form-group">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
</div>
</div>
</div>
<!-- END CONTAINER-->
<div class="red"></div>
<!-- START CONTAINER-->
<div class="col-sm-3">
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Cust PO #3</label>
</div>
</div>
<div class="col-xs-8">
<div class="form-group">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<p class="middle text-center"><b>Customer License Contact Info</b>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Cust PO #</label>
</div>
</div>
<div class="col-xs-8">
<div class="form-group">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Cust PO #</label>
</div>
</div>
<div class="col-xs-8">
<div class="form-group">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Cust PO #</label>
</div>
</div>
<div class="col-xs-8">
<div class="form-group">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
</div>
</div>
</div>
<!-- END CONTAINER-->
<div class="red"></div>
<!-- START CONTAINER-->
<div class="col-sm-3">
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Cust PO #4</label>
</div>
</div>
<div class="col-xs-8">
<div class="form-group">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<p class="middle text-center"><b>Customer License Contact Info</b>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Cust PO #</label>
</div>
</div>
<div class="col-xs-8">
<div class="form-group">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Cust PO #</label>
</div>
</div>
<div class="col-xs-8">
<div class="form-group">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Cust PO #</label>
</div>
</div>
<div class="col-xs-8">
<div class="form-group">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
</div>
</div>
</div>
<!-- END CONTAINER-->
</div>
</div>
</form>
<hr>
<form id="theForm2">
<div class="container-fluid">
<h2>Block Label Nested Form</h2>
<div class="row">
<div class="col-sm-3">
<div class="row no-gutter2 blue">
<div class="col-xs-12">
<label class="control-label">Cust PO #</label>
</div>
<div class="col-xs-12">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
<div class="col-xs-12">
<p class="middle"><b>Customer License Contact Info</b>
</p>
</div>
<div class="col-xs-12">
<label class="control-label">Cust PO #</label>
</div>
<div class="col-xs-12">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
<div class="col-xs-12">
<label class="control-label">Cust PO #</label>
</div>
<div class="col-xs-12">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
<div class="col-xs-12">
<label class="control-label">Cust PO #</label>
</div>
<div class="col-xs-12">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
<div class="col-xs-12">
<p class="middle"><b>Attach POs to Order</b>
</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row no-gutter2 blue">
<div class="col-xs-12">
<label class="control-label">Cust PO #</label>
</div>
<div class="col-xs-12">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
<div class="col-xs-12">
<p class="middle"><b>Customer License Contact Info</b>
</p>
</div>
<div class="col-xs-12">
<label class="control-label">Cust PO #</label>
</div>
<div class="col-xs-12">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
<div class="col-xs-12">
<label class="control-label">Cust PO #</label>
</div>
<div class="col-xs-12">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
<div class="col-xs-12">
<label class="control-label">Cust PO #</label>
</div>
<div class="col-xs-12">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
<div class="col-xs-12">
<p class="middle"><b>Attach POs to Order</b>
</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row no-gutter2 blue">
<div class="col-xs-12">
<label class="control-label">Cust PO #</label>
</div>
<div class="col-xs-12">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
<div class="col-xs-12">
<p class="middle"><b>Customer License Contact Info</b>
</p>
</div>
<div class="col-xs-12">
<label class="control-label">Cust PO #</label>
</div>
<div class="col-xs-12">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
<div class="col-xs-12">
<label class="control-label">Cust PO #</label>
</div>
<div class="col-xs-12">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
<div class="col-xs-12">
<label class="control-label">Cust PO #</label>
</div>
<div class="col-xs-12">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
<div class="col-xs-12">
<p class="middle"><b>Attach POs to Order</b>
</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row no-gutter2 blue">
<div class="col-xs-12">
<label class="control-label">Cust PO #</label>
</div>
<div class="col-xs-12">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
<div class="col-xs-12">
<p class="middle"><b>Customer License Contact Info</b>
</p>
</div>
<div class="col-xs-12">
<label class="control-label">Cust PO #</label>
</div>
<div class="col-xs-12">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
<div class="col-xs-12">
<label class="control-label">Cust PO #</label>
</div>
<div class="col-xs-12">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
<div class="col-xs-12">
<label class="control-label">Cust PO #</label>
</div>
<div class="col-xs-12">
<input type="text" class="form-control textlabellook" name="custpotxt" value="" />
</div>
<div class="col-xs-12">
<p class="middle"><b>Attach POs to Order</b>
</p>
</div>
</div>
</div>
</div>
</div>
</form>
答案 1 :(得分：0)
我认为这是违规行。
class="col-xs-4 col-sm-5 col-md-5 control-label"
也许尝试将其设置为：
class="col-xs-5 col-sm-5 col-md-5 control-label"
看看是否有帮助...
它是唯一一个偏离其他人的人。 Bootstrap首先是移动的，因此它的设计使它的类从最小的开始工作。所以，如果你设置：
class="col-xs-8 col-sm-8 col-md-8">
与将其设置为：
相同 class="col-xs-8">
除非您要更改较大的布局，否则只会是最小的布局，并且它们都会向上继承。
答案 2 :(得分：-1)
对行使用以下内联css。这将有助于扭曲的列重新分配对方。
<div class="row" style="display:flex; flex-wrap:wrap;">
...
</div>
希望这有帮助。