Question

我一直在使用Bootstrap 3来设计我的屏幕，但是在使用control-group时，控件的问题并非从左边开始。大部分时间它工作正常，但偶尔我得到1个标签，它只是拒绝在新行上开始 - 并将包装到上一行：

以下是我的代码的一部分：

pow(x, y)

在下图中，您可以看到问题。

1

有没有人对如何解决这个问题有任何想法...让我开槽便便！

Answer 1

<强>更新

正如您所说，您遇到了保证金问题，这是由于使用-15px左右创建了class="row"的阴沟。

您需要将所有row课程包含在container / container-fluid课程内。

像这样：

<div class="container">
   <div class="row">
   </div>
</div>

如果您需要将列对齐到一行，请不要忘记添加class="row"。

另外，请确保将列总计为12行。

＆＃13;

<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;

引导网格系统控制组没有排队 - Panells

1 个答案: