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

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-horizo​​ntal包起来

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

或者将下一个代码添加到您的 css 文件中:

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