Question

如何摆脱突出显示的空格并使最后两行与前两行对齐？

以下是HTML

<div class="col-md-6">

    <div class="row">
        <div class="form-group mb">
            <label class="col-sm-3 control-label input-sm">Claim Ref</label>
            <div class="col-sm-9">
               <input type="text" class="form-control" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group mb">
            <label class="col-sm-3 control-label input-sm">File Note Date</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" />
            </div>
        </div>
    </div>

</div>

<div class="col-md-6">

    <div class="row">
        <div class="form-group mb">
            <label class="col-sm-3 control-label input-sm">Created By</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group mb">
            <label class="col-sm-3 control-label input-sm">Created Date</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" />
            </div>
        </div>
    </div>

</div>

<div class="col-md-12">

    <div class="row">
        <div class="form-group mb">
            <label class="col-sm-2 control-label input-sm">Short Description</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" />
            </div>
        </div>
    </div>

    <div class="row">
        <div class="form-group mb">
            <label class="col-sm-2 control-label input-sm">Detail</label>
            <div class="col-sm-10">
               <textarea class="form-control"></textarea>
            </div>
        </div>
    </div>
    <br />
    <div class="footer text-right">
        <button type="button" class="mb-sm btn btn-default">Discard Changes</button>
        <button type="submit" class="mb-sm btn btn-primary">Save Changes</button>
    </div>

</div>

Answer 1

因为你有6/12的3/12（或1/2的1/4），这给你1/8或1.5 / 12，Bootstrap不允许你这样做。列必须是整数。

唯一的方法是在其他列上添加空间，方法是将它们设为4/12和8/12而不是最初的3/12和9/12。

我想你可以重新发明轮子并创建自己的1.5 / 12色谱柱和10.5 / 12色谱柱，但我怀疑它是值得的。这是我的初步建议可行的方式：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6">

    <div class="row">
        <div class="form-group mb">
            <label class="col-md-4 col-sm-2 control-label input-sm">Claim Ref</label>
            <div class="col-md-8 col-sm-10">
               <input type="text" class="form-control" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group mb">
            <label class="col-md-4 col-sm-2 control-label input-sm">File Note Date</label>
            <div class="col-md-8 col-sm-10">
                <input type="text" class="form-control" />
            </div>
        </div>
    </div>

</div>

<div class="col-md-6">

    <div class="row">
        <div class="form-group mb">
            <label class="col-md-4 col-sm-2 control-label input-sm">Created By</label>
            <div class="col-md-8 col-sm-10">
                <input type="text" class="form-control" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group mb">
            <label class="col-md-4 col-sm-2 control-label input-sm">Created Date</label>
            <div class="col-md-8 col-sm-10">
                <input type="text" class="form-control" />
            </div>
        </div>
    </div>

</div>

<div class="col-md-12">

    <div class="row">
        <div class="form-group mb">
            <label class="col-sm-2 control-label input-sm">Short Description</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" />
            </div>
        </div>
    </div>

    <div class="row">
        <div class="form-group mb">
            <label class="col-sm-2 control-label input-sm">Detail</label>
            <div class="col-sm-10">
               <textarea class="form-control"></textarea>
            </div>
        </div>
    </div>
    <br />
    <div class="footer text-right">
        <button type="button" class="mb-sm btn btn-default">Discard Changes</button>
        <button type="submit" class="mb-sm btn btn-primary">Save Changes</button>
    </div>

</div>

Answer 2

我实际上并不认为这可以通过任何预定义的Bootstrap类的组合来实现。但是，如果您愿意添加自己的CSS来覆盖宽度，这很容易解决：

@media screen and (min-width: 768px) { /* Bootstrap .md breakpoint */
  label.col-sm-2 {
    width: 12.5%;
  }
  label.col-sm-2+div.col-sm-10 {
    width: 87.5%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-6">

  <div class="row">
    <div class="form-group mb">
      <label class="col-sm-3 control-label input-sm">Claim Ref</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" />
      </div>
    </div>
  </div>
  <div class="row">
    <div class="form-group mb">
      <label class="col-sm-3 control-label input-sm">File Note Date</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" />
      </div>
    </div>
  </div>

</div>

<div class="col-md-6">

  <div class="row">
    <div class="form-group mb">
      <label class="col-sm-3 control-label input-sm">Created By</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" />
      </div>
    </div>
  </div>
  <div class="row">
    <div class="form-group mb">
      <label class="col-sm-3 control-label input-sm">Created Date</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" />
      </div>
    </div>
  </div>

</div>

<div class="col-md-12">

  <div class="row">
    <div class="form-group mb">
      <label class="col-sm-2 control-label input-sm">Short Description</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" />
      </div>
    </div>
  </div>

  <div class="row">
    <div class="form-group mb">
      <label class="col-sm-2 control-label input-sm">Detail</label>
      <div class="col-sm-10">
        <textarea class="form-control"></textarea>
      </div>
    </div>
  </div>
  <br />
  <div class="footer text-right">
    <button type="button" class="mb-sm btn btn-default">Discard Changes</button>
    <button type="submit" class="mb-sm btn btn-primary">Save Changes</button>
  </div>

</div>

运行后单击“完整页面”以查看它是否有效。

请注意使用 adjacent sibling combinator (+) ，以便仅定位紧跟标签后的col-sm-10列。这将阻止规则应用于前面没有标签的<div>元素。

另请注意媒体查询，以确保列正确占据宽度较小的完整100%宽度。

您可能希望根据附加代码调整类选择器，但请记住始终为它们提供比定义宽度的Bootstrap选择器更多的 specificity 。

希望这有帮助！：）

Bootstrap表单设计间距问题

2 个答案: