Question

我正在使用bootstrap 3并拥有此HTML：

<body>
    <div class="container body-content">
        <div class="row">
            <div class="col-lg-6">
                <label class="control-label" for="parameterValue">sdsd</label>
                <div class="input-group">
                    <input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
                    <span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
                </div>
                <label class="control-label" for="parameterValue">sdsd</label>
                <div class="input-group">
                    <input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
                    <span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
                </div>
                <button class="btn btn-default btn-primary" data-bind="click: $root.completeStep">Complete Step</button>
            </div>
        </div>
    </div>
</body>

fiddle

我希望最后一个按钮与input-group div垂直隔开而不接触它。

我使用表单找到的示例按钮间隔开：fiddle

这就是我喜欢我的按钮的方式。我怎么能得到它？

Answer 1

简单地将每对<label>和<div class="input-group">包裹在<div>类.form-group之后。 （或者只是根据需要包装最后一对）

原因是twitter bootstrap将margin-bottom 15px应用于.form-group。您也可以手动执行此操作，方法是为<button>提供上边距或为最后一个输入设置下边距。

<强> EXAMPLE HERE

<div class="container body-content">
    <div class="row">
        <div class="col-lg-6">

            <div class="form-group">
                <label class="control-label" for="parameterValue">sdsd</label>
                <div class="input-group">
                    <input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
                    <span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
                </div>                    
            </div>

            <div class="form-group">
                <label class="control-label" for="parameterValue">sdsd</label>
                <div class="input-group">
                    <input class="form-control" type="text" name="parameterValue" placeholder="Enter a value..." />
                    <span class="input-group-btn"><button class="btn btn-default btn-success">Update</button></span>
                </div>                    
            </div>

            <button class="btn btn-default btn-primary" data-bind="click: $root.completeStep">Complete Step</button>

        </div>
    </div>
</div>

在bootstrap中的输入和按钮之间添加空格

1 个答案: