我有一个正常的表单（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>
您可以使用Bootstrap已经提供的输入组类。
这样地：
JSFIDLE
代码段：
<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>
您可以向按钮添加样式页边距顶部：24px。我假设这个按钮最终会有一个id或其他class来识别它。从这里开始，在样式表中创建一个选择器，并将其添加到那里，而不是像本例中的内联。
匿名用户
这里你有一个jsfiddle，如果你不希望它与边缘居中。你可以向这些div添加另一个类，这样你就不会改变所有默认的引导样式，但这只是为了向你展示如何做到这一点
.col-xs-7, .col-xs-4{
display:inline-block;
float:none;
}
相关问题
- 如何迭代Hashmap并与同一Hashmap中的其他键进行组合以比较它们的对象
- 如何防止对数组中类对象的重复引用？
- HashMap如何识别内部数组中的哪些位置包含元素？
- 异步管道是否从服务中定义并从组件变量指向的可观察对象取消订阅？
- 组件中的Angular 2重复订阅
- 应该在ngOnDestroy（）中将Angular组件变量设置为null吗？
- Angular2处理非组件类中的订阅
- Angular： in ngOnInit（）当我重新加载组件时，我的rxjs Fucntion不会运行
- 在视图中使用@input可观察，但组件中的管道函数被忽略
- 如何将异步管道过滤成Angular子组件
- Angular 4每次组件加载时重新加载函数
- 组件被销毁和重访后，订阅在ngOnInit函数中运行
- 是否需要基于fromEvent取消订阅表单事件
- 为什么组件销毁后订阅仍然存在？
- Angular 5将服务注入组件
- RxJS：带直到（）角度组件的ngOnDestroy（）
- 如何取消订阅角度组件中的多个可观察对象？
- @组件的Angular@取消订阅装饰器
- 是否有等效的异步管道可以在组件中使用？
- Spring Boot Thymeleaf白标签错误页面
