在 angular 项目中水平居中 bootstrap 4 个按钮工具栏

Question

我想要做的就是将 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 class 我可以添加使其工作。

Answer 1

你试过了吗：

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

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

Answer 2

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

.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>

在 angular 项目中水平居中 bootstrap 4 个按钮工具栏

horizontally Center bootstrap 4 button toolbar in angular project

html

css

centering

bootstrap-4

angular