Question

有一些类似的问题，但没有一个真正为我的问题提供解决方案（据我所见）

这是我的代码：

<div class="form-group">
    <div class="col-xs-3">
        <label for="quantity">Quantity:</label>
        <input type="quantity" class="form-control" min="1" max="100" ng-model="formData.quantity" required />
    </div>
    <div class="col-xs-9">
        <label for="type">Type:</label>
        <select class="form-control" name="type" ng-model="formData.type" required>
            <option value="240" selected>240</option>
            <option value="120">120</option>
        </select>
        <!--<input type="text" class="form-control" name="type" ng-model="formData.type"> -->
    </div>
</div>

<div class="form-group">
        <label for="type">Type 2:</label>
        <select class="form-control" name="typ2 ng-model="formData.typ2e" required>
            <option value="240" selected>240</option>
            <option value="120">120</option>
        </select>
        <!--<input type="text" class="form-control" name="type" ng-model="formData.type"> -->
</div>

<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
    <a ui-sref="form.interests" class="btn btn-block btn-info">
    Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
    </a>
</div>
</div>

在表单组之间没有垂直间距，它们一个在另一个上面连接在一起。不知道该怎么办。任何帮助将不胜感激！

Answer 1

您可以使用form-horizontal

包装所有代码

<div class="form-horizontal">your code</div>

或者在下一段代码中添加到您的css文件中：

.form-group::before,
.form-group::after {
   content: " ";
   display: table;
}

Bootstrap表单组之间没有垂直空间

1 个答案: