Question

在我的表单中，我有两个cols，标签位于顶部，全宽输入。我的问题是我现在有两个需要无线电的领域。我想把col分成2并且下面有两个带有两个无线电的标签。我可以做到这一点，但是下一个字段的对齐不正确。

你可以在这个bootply http://www.bootply.com/VlFHq0daui

中看到它

租赁物业和中介费率单位。它下面的关键代码没有正确对齐。

<form>

  <div class="row">

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

        <div class="form-group">
            <label for="address_line1" class="control-label">Address 1</label>
            <input type="text" class="form-control" id="address_line1">
        </div>

        <div class="form-group">
            <label for="address_line1" class="control-label">Address 2</label>
            <input type="text" class="form-control" id="address_line2">
        </div>

        <div class="form-group">
            <label for="town" class="control-label">Town*</label>
            <input type="text" class="form-control" id="town">
        </div>

        <div class="form-group">
            <label for="county" class="control-label">County</label>
            <input type="text" class="form-control" id="county">
        </div>

        <div class="form-group">
            <label for="eircode" class="control-label">Eircode</label>
            <input type="text" class="form-control" id="eircode">
        </div>
    </div>

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

        <div class="form-group">
            <label for="reference" class="control-label">Reference</label>
            <input type="text" class="form-control" id="reference">
        </div>

        <div class="form-group">
            <label for="tax_reference" class="control-label">Tax Reference</label>
            <input type="text" class="form-control" id="tax_reference">
        </div>

        <div class="form-group">
            <label for="local_authority" class="control-label">Local Authority</label>
            <select name="local_authority" id="local_authority" class="form-control">
                <option>Select...</option>
                <option value="41">Ahtlone Town Council</option>
                <option value="88">Youghal Town Council</option>
            </select>
        </div>

        <div class="form-group">

            <div class="row">
                <div class="col-lg-6">

                    <label for="leased_property" class="control-label">Leased Property?</label>
                    <br>

                    <label class="radio-inline">
                      <input type="radio" name="leased_property" id="leased_property" value="YES"> Yes
                    </label>

                    <label class="radio-inline">
                      <input type="radio" name="leased_property" id="leased_property" value="NO"> No
                    </label>

                </div>

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

                    <label for="mesne_rates_unit" class="control-label">Mesne Rates Unit?</label>
                    <br>

                    <label class="radio-inline">
                      <input type="radio" name="mesne_rates_unit" id="mesne_rates_unit" value="YES"> Yes
                    </label>

                    <label class="radio-inline">
                      <input type="radio" name="mesne_rates_unit" id="mesne_rates_unit" value="NO"> No
                    </label>

                </div>
            </div>

        </div>

        <div class="form-group">
            <label for="key_code" class="control-label">Key Code</label>
            <input type="text" class="form-control" id="key_code">
        </div>

        <div class="form-group">
            <label for="gprn_number" class="control-label">GPRN Number</label>
            <input type="text" class="form-control" id="gprn_number">
        </div>

        <div class="form-group">
            <label for="mprn_number" class="control-label">MPRN Number</label>
            <input type="text" class="form-control" id="mprn_number">
        </div>

    </div>

</div>

</form>

Answer 1

您可以在具有相同输入框高度的div内扭曲无线电输入：

<div class="radios">
    <label class="radio-inline">
        <input type="radio" name="leased_property" id="leased_property" value="YES"> Yes
    </label>

    <label class="radio-inline">
        <input type="radio" name="leased_property" id="leased_property" value="NO"> No
    </label>
</div>

CSS：

.radios{

    height: 34px;
    padding: 5px;

}

Bootply

Answer 2

将此添加到您的CSS。

.form-group {
    min-height:59px;
  }

Answer 3

经过一番尝试，我找到了一个解决方案，它并不完美，但会解决问题。您可以将无线电元素包装到row并硬编码所需的边距，以便按照您想要的方式对齐按钮。为此，我为row提供了自定义类align-radios。

HTML：

<div class="row align-radios">
    <label class="radio-inline">
        <input type="radio" name="leased_property" id="leased_property" value="YES"> Yes
    </label>

    <label class="radio-inline">
        <input type="radio" name="leased_property" id="leased_property" value="NO"> No
    </label>
</div>

CSS：

.align-radios {
    margin: 7px 0 7px 5px; 
}

希望这对你有所帮助。

Bootstrap CSS - 如何使用其下方的内联无线电获取控件标签

3 个答案: