twitter-bootstrap 在引导程序中的输入和按钮之间添加空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26005783/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add space between input and button in bootstrap
提问by Sam Holder
I am using bootstrap 3 and have this HTML:
我正在使用引导程序 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>
I want the final button to be spaced away vertically from the input-groupdiv and not touching it.
我希望最后一个按钮与input-groupdiv垂直间隔开，而不是触摸它。
An example I found using a form has the button spaced out: fiddle
我发现的一个使用表单的示例将按钮间隔开：fiddle
and this is how I'd like my button. How can I get that?
这就是我想要的按钮。我怎样才能得到那个？
回答by Hashem Qolami
Simply wrap each pair of <label>and <div class="input-group">by a <div>having .form-groupclass. (Or just wrap the last pair if needed so)
简单地将每一对<label>和<div class="input-group">由一个<div>有.form-group类包装起来。（或者如果需要，只需包裹最后一对）
The reason is that twitter bootstrap applies a margin-bottomof 15pxto .form-group. You could also do this manually by giving the <button>a top margin or giving the last input a bottom margin.
其原因是，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>
