当前位置 : 主页 > 网页制作 > Bootstarp >

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

来源:互联网 收集:自由互联 发布时间:2021-06-12
在我的表单中,我有两个cols,标签在顶部,全宽输入.我的问题是我现在有两个需要无线电的领域.我想把col分成2并且下面有两个带有两个无线电的标签.我可以把它弄好但是在下一个场上对
在我的表单中,我有两个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

网友评论