我一直在使用Bootstrap 3来设计我的屏幕,但是在使用control-group时,控件的问题并非从左边开始。大部分时间它工作正常,但偶尔我得到1个标签,它只是拒绝在新行上开始 - 并将包装到上一行:
以下是我的代码的一部分:
pow(x, y)
在下图中,您可以看到问题。
有没有人对如何解决这个问题有任何想法...让我开槽便便!
答案 0 :(得分:0)
<强>更新
正如您所说,您遇到了保证金问题,这是由于使用-15px
左右创建了class="row"
的阴沟。
您需要将所有row
课程包含在container
/ container-fluid
课程内。
像这样:
<div class="container">
<div class="row">
</div>
</div>
如果您需要将列对齐到一行,请不要忘记添加class="row"
。
另外,请确保将列总计为12行。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">PPE and Ladders</h3>
</div>
<div class="panel-body">
<div class="control-group">
<div class="container">
<div class="row">
<label class="control-label col-xs-3">Site Specific PPE:</label>
<div class="col-xs-9">
<input type="checkbox" id="siteSpecificPPE" name="siteSpecificPPE" tabindex=10 />
</div>
</div>
</div>
</div>
<div class="control-group">
<div class="container">
<div class="row">
<label class="control-label col-xs-3">Comments:</label>
<div class="col-xs-9">
<textarea rows="3" class="form-control" id="PPEComments" name="PPEComments" tabindex=10></textarea>
</div>
</div>
</div>
</div>
<div class="control-group">
<div class="container">
<div class="row">
<label class="control-label col-xs-3">Ladder ID:</label>
<div class="col-xs-2">
<input type="text" class="form-control" id="laddersID" name="laddersID" tabindex=10 />
</div>
<label class="control-label col-xs-3">Safety Catches:</label>
<div class="col-xs-1">
<input type="checkbox" id="safetyCatchesWorking" name="safetyCatchesWorking" tabindex=10></input>
</div>
<label class="control-label col-xs-2">Warn. Sign:</label>
<div class="col-xs-1">
<input type="checkbox" id="warningSign" name="warningSign" tabindex=10></input>
</div>
</div>
</div>
</div>
<div class="control-group">
<div class="container">
<div class="row">
<label class="control-label col-xs-3">Comments:</label>
<div class="col-xs-9">
<textarea rows="3" class="form-control" id="equipmentComments" name="equipmentComments" tabindex=1></textarea>
</div>
</div>
</div>
</div>
</div>
<!-- panel-body -->
</div>
<!-- panel panel-primary -->
&#13;