twitter bootstrap 3中类似的表单操作类设计
twitter bootstrap 3中类似的表单操作类设计
提问于 2013-12-09 00:24:28
我们升级到了twitter bootstrap 3(从2.3.2)，并在不同的地方使用了.form-horizontal和.form-actions类中的按钮。我们在新版本中寻找类似的设计或替代方案，但都无济于事。
如果没有任何选择，那么将两个或多个按钮(在同一行中)放在水平表单末尾的新推荐方法是什么？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-01-22 17:40:10
bootstrap 3中删除了.form-action，您可以使用form-group在表单末尾添加按钮。
您可以在同一行中添加更多按钮以形成组：
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-default btn-lg" value="Save" >
<input type="submit" class="btn btn-default btn-lg" value="Update" >
</div>
</div>如果您希望按钮具有一些颜色效果或背景颜色，则必须考虑表单组的左右边距为-15px。
<div style="background-color: black; margin-left: 0px; margin-right: 0px;" class="form-group">Stack Overflow用户
发布于 2013-12-12 22:19:08
您也可以在bs3中使用form-horizontal类。然而，主要的变化是你必须为标签定义列宽度，并且你可以在col-x-x类中组合更多的按钮，作为bs2中的controls，而不是使用form-actions。请参阅this。
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button> <button type="submit" class="btn btn-default">Cancel</button>
</div>
</div>
</form>Stack Overflow用户
发布于 2019-07-23 19:21:29
导航栏有一个类似的视图
<nav class="navbar navbar-default">
<div class="container-fluid">
<button class="btn btn-primary navbar-btn">Update</button>
<button class="btn btn-default navbar-btn">Cancel</button>
</div>
</nav>或者很好
<div class="well well-sm">
<button class="btn btn-primary navbar-btn">Update</button>
<button class="btn btn-default navbar-btn">Cancel</button>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20455707
复制相关文章
相似问题
腾讯云开发者
