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

发布时间：2020-12-17 23:15:30 所属栏目：安全来源：网络整理

导读：在我的表单中,我有两个cols,标签在顶部,全宽输入.我的问题是我现在有两个需要无线电的领域.我想把col分成2并且下面有两个带有两个无线电的标签.我可以把它弄好但是在下一个场上对齐不正确. 你可以在这个bootply http://www.bootply.com/VlFHq0daui中看到它

在我的表单中,我有两个cols,标签在顶部,全宽输入.我的问题是我现在有两个需要无线电的领域.我想把col分成2并且下面有两个带有两个无线电的标签.我可以把它弄好但是在下一个场上对齐不正确.

你可以在这个bootply http://www.bootply.com/VlFHq0daui中看到它

租赁房产和中介费率单位.它下面的键代码没有正确对齐.

enter image description here

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

解决方法

您可以在具有相同高度输入框的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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!