Question

我使用以下代码与bootstrap库，但行间距不相等，任何人都可以帮助我使行间隔相等吗？

<div class="col-md-11">
    <div class="form-group">
        <div class="col-xs-3">
            <label for="menu_dish_name">Name</label>
        </div>
        <div class="col-xs-9">
            <input id="menu_dish_name" name="menu_dish[name]" size="30%" type="text" value="Sinagara">
        </div>
    </div>
    <br>
    <br>
    <div class="form-group">
        <div class="col-xs-3">
            <label for="menu_dish_desc">Desc</label>
        </div>
        <div class="col-xs-9">
            <textarea cols="29%" id="menu_dish_desc" name="menu_dish[desc]"></textarea>
        </div>
    </div>
    <br>
    <br>
    <div class="form-group">
        <div class="col-xs-3">
            <label for="menu_dish_price">Price</label>
        </div>
        <div class="col-xs-9">
            <input id="menu_dish_price" name="menu_dish[price]" size="30%" type="text" value="2.0">
        </div>
    </div>
    <br>
    <br>
    <div class="form-group">
        <div class="col-xs-3">Associate Addon Groups</div>
        <div class="col-xs-9">
            <input name="menu_dish[addon_groups][]" type="hidden" value="">
            <select id="menu_dish_addon_groups" multiple="multiple" name="menu_dish[addon_groups][]" size="3" style="width: 32.5%">
                <option selected="selected" value="1">Sodas</option>
                <option value="2">Condisment</option>
            </select>
        </div>
    </div>
    <br>
    <br>
    <div class="form-group">
        <div class="col-xs-3">
            <label for="menu_dish_image">Image</label>
        </div>
        <div class="col-xs-9">
            <input id="menu_dish_image" name="menu_dish[image]" type="file">
        </div>
    </div>
</div>

Answer 1

我认为您需要更好地构建标记。大多数表单组css都依赖于.form-inline .form-group或.nav-bar .form-group之类的父选择器。

也参考bootstrap docs and examples。

完成后，您根本不需要<br>标记。

修改

再次查看此内容后，您在<div class="row">元素之间省略了col。查看grid syntax以获取更多方向。

Answer 2

.form-group未包含其花车。你可以用它包含它们：

.form-group { overflow: hidden }

您还需要取出间距<br>元素。 Properly spaced example

Answer 3

我会取消休息并使用边距或填充来创建空格

CSS

$("#imageLoading").addClass("imageRotateHorizontal");

HTML

        <img id='imageLoading' src="..." class="imageRotateHorizontal" />

https://jsfiddle.net/hk51kctn/

bootstrap html等于行间距

3 个答案:

修改