javascript - 在 Bootstrap 的按钮内对齐两个元素时出现问题

Question

我正在尝试使用 Bootstrap 4 在按钮内水平放置两个文本。“链接”一词总是被推到下一行，我希望它位于“复制”旁边。

我试过使用 Float，但它会将“链接”推到右边太远。

<div className="col-3 w3-button w3-tiny">
  <button
    onClick={() => {
      this.copyReferralLink();
    }}
    className="btn btn-block btn-primary"
  >
    {this.props.t("Copy")}
    <span className="d-none d-sm-block btn-primary float-right">
      {this.props.t("link")}
    </span>
  </button>
</div>

这就是我目前所拥有的，感谢任何帮助!

Answer 1

您将使用 d-sm-inine-block 而不是 d-sm-block 类。

此外，您可能希望将 this.props.t("Copy") 包装到它自己的 span 中。