如何在 Bootstrap 中获得正确对齐的按钮
答案:使用text-right类
您可以简单地使用包含元素上的类 .text-right 来右对齐块框或网格列中的Bootstrap按钮。 它适用于 Bootstrap 3 和 4 版本。
让我们试试下面的例子来了解它的基本工作原理:
示例
<div class="container">
<div class="row">
<div class="col-md-12 bg-light text-right">
<button type="button" class="btn btn-primary">Cancel</button>
<button type="button" class="btn btn-warning">Save</button>
</div>
</div>
</div>让我们再看一个例子。 在这里，按钮和文本并排放置在 div 元素中。 要将文本左对齐和按钮右对齐，我们需要在按钮元素上使用 .float-right 属性。 此外，如果按钮元素不在网格列内（即 .col-*），那么您还需要在父 <div> 元素上应用类 .clearfix。
示例
<div class="bg-light clearfix">
<span>Click any button to proceed</span>
<button type="button" class="btn btn-warning float-right">Save</button>
<button type="button" class="btn btn-primary float-right">Cancel</button>
</div>如果您使用的是 Bootstrap 3 版本，请将 float-right 类替换为 pull-right 类。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
