Question

我正在使用Bootstrap构建一个表单，我有一个我无法解决的间距问题。

这是我的代码：

<row>
  <div class="col-md-offset-1 col-md-12 margin-bottom-5">
    <label class="col-md-4">24 Months</label>
    <input type="text" readonly name="sum-lease24-mpp" class="sum-24mpp col-md-2" id="sum-lease24-mpp"><br />
    <input type="text" readonly name="sum-lease24-tpm" class="sum-24tpm col-md-2 margin-left-5" id="sum-lease24-tpm"><br />
  </div>
</row>

这行是什么样的：

正如您所看到的，第二个文本输入字段略微下降。有人能说出为什么会发生这种情况以及如何解决它吗？

Answer 1

<div class="container">
    <row>
        <div class="form-group col-md-offset-1 col-md-12 margin-bottom-5">
            <div class="control-label col-md-2">
                <label>24 Months</label>
            </div>
            <div class="col-md-2">
                <input type="text" readonly="readonly" name="sum-lease24-mpp" class="form-control sum-24mpp" id="sum-lease24-mpp">
            </div>
            <div class="col-md-2">
                <input type="text" readonly="readonly" name="sum-lease24-tpm" class="form-control sum-24tpm col-md-4 margin-left-5" id="sum-lease24-tpm">
            </div>
        </div>
    </row>
</div>

Answer 2

我假设您正在使用Bootstrap 3.我假设您的意思是<div class="row">而不是<row>。

通常使用form-inline来获取Bootstrap以使表单保持在同一行，然后用form-group包装每组标签/输入。（请参阅Inline form）但是，如果您需要基于网格的大小调整，它实际上并不适用于表单内联。

你仍然可以使用网格，但你需要将每个元素包装在<div class="col-xx-xx">中（见Control sizing）

每个表单元素也需要用form-control标记，否则Bootstrap会非常奇怪地格式化它。

<div class="row margin-bottom-5"> <!-- assuming margin-bottom-5 defined in CSS -->
    <div class="col-md-4 col-md-offset-1">
        <!-- This isn't really a label for a single form element, is it? -->
        <b>24 Months</b>
    </div>
    <div class="col-md-2">
        <!-- A label is expected for each form element. Use sr-only to hide it  -->
        <label for="sum-lease24-mpp" class="sr-only">Sum 24 MPP</label>
        <input type="text" readonly name="sum-lease24-mpp" class="form-control sum-24mpp" id="sum-lease24-mpp">
    </div>
    <div class="col-md-2 margin-left-5">
        <label for="sum-lease24-tpm" class="sr-only">Sum 24 TPM</label>
        <input type="text" readonly name="sum-lease24-tpm" class="form-control sum-24tpm" id="sum-lease24-tpm">
    </div>
</div>

引导格式问题

2 个答案: