在角度项目中水平居中引导 4 按钮工具栏答案

【问题标题】：horizontally Center bootstrap 4 button toolbar in angular project在角度项目中水平居中引导 4 按钮工具栏
【发布时间】：2018-09-18 03:44:18
【问题描述】：

我要做的就是将 dang 按钮工具栏水平居中。到目前为止，我只有：

<div class="row">
  <div class="col-sm-6 mx-auto">
    <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">Forgot Password?</button>
      </div>
    </div>
  </div>
</div>

附件是它的外观图片。似乎应该有一些我可以添加的 boostrap 类使其工作。

【问题讨论】：

您是否尝试过使用引导程序中的偏移类？您也可以使用 css 轻松完成此操作。偏移量示例：formoid.com/articles/bootstrap-offset-example-961.html

标签： html css angular bootstrap-4 centering

【解决方案1】：

你试过了吗：

<div class="row justify-content-center">
    .
    .
    .
</div>

您可以在此处查看根据您的需要对齐内容的几种方法：https://getbootstrap.com/docs/4.0/layout/grid/

【讨论】：

【解决方案2】：

您可以将此 CSS 规则应用于 btn-toolbar 类

.btn-toolbar{
    text-align: center !important;
    display: Block !important;
}

.btn-toolbar{
  text-align: center !important;
  display: Block !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-6 mx-auto">
    <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">Forgot Password?</button>
      </div>
    </div>
  </div>
</div>

【讨论】：