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

Question

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

Sam*_*der 8 html css twitter-bootstrap twitter-bootstrap-3

我正在使用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>

Run Code Online (Sandbox Code Playgroud)

小提琴

我希望最后一个按钮与input-groupdiv 垂直间隔而不接触它.

我发现使用表单的一个例子是按钮间隔开:小提琴

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

Answer 1

Has*_*ami 14

简单地包裹每对<label>和<div class="input-group">由一个<div>具有.form-group类.(或者如果需要,只需包裹最后一对)

其原因是,Twitter的引导施加margin-bottom的15px到.form-group.您也可以通过给出<button>上边距或给最后一个输入设置下边距来手动执行此操作.

这里的例子

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，11 月前
查看次数：	18695 次
最近记录：	10 年，11 月前