如何水平对齐引导文本和按钮

Question

我正在用react和bootstrap编码。布局按钮和下面的文本。

  <div>
    <h3> <strong>"Title"</strong> </h3>
    <Button color="primary" className="mr-xs">
      <i className="fa fa-check mr-xs mb-xs" />Edit
    </Button>
  </div>

但是我想像下面那样水平对齐文本和按钮。 想在文本和按钮之间保留一些空间

使用引导程序类名称或CSS做到这一点的任何简单方法吗？

Answer 1

您可以这样做-

<div className="row">
    <div className="col-6">
        <h3><strong>"Title"</strong> </h3>
    </div>
    <div className="col-6">
        <Button color="primary" className="mr-xs">
         <i className="fa fa-check mr-xs mb-xs" />Edit
        </Button>
    </div>
</div>

Answer 2

将代码包装在<div class='row'></div>

中

Answer 3

仅使用Bootstrap

使div灵活显示，然后使用页边距获取适当的结果或paste0(".",x)，justify-content-start，justify-content-end等。

justify-content-center

有关“ .d-flex” here的更多详细信息，请参阅Bootstrap的文档。