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

我正在使用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有什么简单的方法可以做到这一点吗

---

将代码包装在一个

中，您可以通过执行-

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

仅使用引导 将您的div设置为flex显示，然后使用边距获得适当的结果，或调整内容开始、内容结束、内容中心等

---

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

您是否尝试使用row和col来实现您想要的功能？我只是想知道其他简单的方法。我知道路和沟。

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