如何在Angular项目中水平居中Bootstrap 4按钮工具栏

嘿，我看你已经在尝试用Bootstrap的网格类来居中按钮工具栏了，这里给你几个稳妥的实现方案，帮你搞定水平居中的需求：

方案1：基于你现有代码的优化 #

你已经用了col-sm-6 mx-auto让列容器在row里居中，只需要给btn-toolbar加个justify-content-center类就行——因为Bootstrap的btn-toolbar默认是flex布局，这个类能让里面的按钮组在容器内水平对齐到中间：

<div class="row">
  <div class="col-sm-6 mx-auto">
    <div class="btn-toolbar justify-content-center" role="toolbar" aria-label="Toolbar with button groups">
      <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">Sign Up</button>
      </div>
      <div class="btn-group mr-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">Log In</button>
      </div>
    </div>
  </div>
</div>

这个方案的好处是，在小屏幕（sm及以上）会把工具栏限制在6列宽度内，同时居中；更小的屏幕上，列会自动占满宽度，按钮组也会跟着居中。

方案2：无宽度限制的全局居中 #

如果不需要限制工具栏的宽度，只想让它在页面水平居中，直接用flex布局的容器包裹就行，更简洁：

<div class="d-flex justify-content-center">
  <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
      <button type="button" class="btn btn-secondary">Sign Up</button>
    </div>
    <div class="btn-group mr-2" role="group" aria-label="Second group">
      <button type="button" class="btn btn-secondary">Log In</button>
    </div>
  </div>
</div>

方案3：用row+col的全屏居中 #

如果你想让工具栏在整个row范围内居中，也可以这样写：

<div class="row">
  <div class="col">
    <div class="btn-toolbar justify-content-center" role="toolbar" aria-label="Toolbar with button groups">
      <!-- 按钮组内容 -->
    </div>
  </div>
</div>

这几种方式都能完美实现水平居中，你可以根据自己的布局需求选就行~

内容的提问来源于stack exchange，提问作者skyleguy