引导:带标签的内联窗体组
引导:带标签的内联窗体组
提问于 2016-08-18 20:31:09
我有一个普通的表单(Twitter引导，而不是内联)，但是一个输入字段在它旁边有一个按钮(见下面的图)。所有输入字段的顶部都有一个标签。
什么是正确的引导语法(最好不用添加我自己的CSS)有一个内联表单组(输入字段和它旁边的按钮)，标签不是内联的(即位于输入字段的上方)？
<form>
<div class="form-group">
<label for="mobile">Mobile</label>
<input type="text" class="form-control" />
</div>
<div class="row">
<div class="col-xs-8">
<div class="form-group">
<label for="coupon">Coupon</label> <!-- should behave like the other non-inlined form fields -->
<input type="text" class="form-control" />
</div>
</div>
<!-- should be inline aligned with the input field -->
<div class="col-xs-4">
<button class="btn btn-primary">Apply</button>
</div>
</div>
</form>
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-08-18 21:08:07
您可以使用已经提供的输入组类引导程序。
如下所示：
代码片段：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<main class="container">
<form>
<div class="form-group">
<label for="mobile">Mobile</label>
<input type="text" class="form-control" />
</div>
<div class="form-group">
<label for="coupon">Coupon</label>
<!-- should behave like the other non-inlined form fields -->
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Apply</button>
</span>
</div>
</div>
</form>
Stack Overflow用户
发布于 2016-08-18 20:46:58
您可以向按钮中添加样式margin-top:24px。我假设这个按钮最终会有一个id或其他class来识别它，当它被点击时。然后在样式表中创建一个选择器并将其添加到那里，而不是像下面的示例那样内联。
<button style="margin-top:24px;" class="btn btn-primary">Apply</button>
Stack Overflow用户
发布于 2016-08-18 20:47:57
这里你有一个小提琴，如果你不希望它的中心与保证金。您可以在这些div中添加另一个类，这样就不会更改所有默认的引导样式，但这只是为了向您展示如何做到这一点。
.col-xs-7, .col-xs-4{
display:inline-block;
float:none;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39026998
复制相关文章
相似问题
腾讯云开发者
