如何正确对齐bootstrap窗体按钮？
如何正确对齐bootstrap窗体按钮？
提问于 2014-08-21 15:03:30
请告诉我如何正确对齐此表单“登录”按钮使用bootstrap。我尝试使用pull-right类。但是调整大小后，我的按钮不在正确的位置。
<div role="form">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember Me
</label>
</div>
<button class="btn-info btn">Log in</button>
</div>回答 3
Stack Overflow用户
回答已采纳
发布于 2014-08-21 15:12:16
您可以首先使用text-right，您必须将其包装在div中，如下所示：
<div class="text-right">
<button class="btn-info btn">Log in</button>
</div>LIVE-DEMO
下面是完整的代码
<div role="form">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox"/> Remember Me
</label>
</div>
<div class="text-right"> <!--You can add col-lg-12 if you want -->
<button class="btn-info btn">Log in</button>
</div>
</div>
Stack Overflow用户
发布于 2014-08-21 15:15:43
pull-right工作正常
<button class="btn-info btn pull-right">Log in</button>Stack Overflow用户
发布于 2018-08-27 23:00:07
如果你在Bootstrap4中有行和列的容器中，所有的浮点数都不能正常工作。
取而代之的是，你必须添加一个间隔列来使东西对齐。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<p>Float right demo inside a container-fluid, Bootstrap 4</p>
<div class="container-fluid">
<div class="row">
<div class="col bg-warning"></div><!-- This is the filler column -->
<div class="col-auto bg-success">.col-auto (Like a Float Right)</div>
</div>
</div>
希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25420164
复制相关文章
相似问题
腾讯云开发者
