Question

我正在将Bootstrap 4与React一起使用。我正在尝试将h4和右对齐几个按钮排成一行。我可以完成它，但是h4文本未居中于整个宽度。仅在放置按钮后剩余的空间居中。

我想将h4元素居中放置在整个宽度上，同时将所有按钮都放在右边的一行中。

我可以知道如何实现吗？

<div>
  <div className="float-right">
    <EditButton /> <DeleteButton />
  </div>
  <h4 style={{ textAlign: "center" }}>Application Name</h4>
</div>

Answer 1

我了解您需要类似的内容，因此您必须首先将display: inline属性设置为h4，以便按钮（默认情况下为内联）跟随标题，然后text-center类将使所有内容居中；但是我想您也希望标题本身位于屏幕中央，而按钮位于屏幕右侧，对吗？

.buttons {
  top: 0px;
  right: 0px;
}

h4{
  right: 50%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<h4 class="text-center">H4 Title</h4>

<div class="text-center">
  <h4 class="d-inline">H4 Title</h4>
  <button class="btn btn-primary">Button</button>
  <button class="btn btn-primary">Button</button>
  <button class="btn btn-primary">Button</button>
</div>


<div class="text-center mt-5 position-relative">
  <h4 class="w-100 text-center">
    H4 Title
  </h4>
  <div class="position-absolute buttons">
      <button class="btn btn-primary">Button</button>
      <button class="btn btn-primary">Button</button>
      <button class="btn btn-primary">Button</button>
    </div>
</div>

Answer 2

您可以使用类text-center居中文本，并使用类text-right右对齐按钮

其中container-fluid用于全角，而m-0 p-0是margin: 0; & padding: 0用于去除角部空间。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container-fluid p-0 m-0">
  <div class="text-center">
    <h4 class="d-inline">i am H4</h4>
    <button class="d-inline float-right btn btn-info">Demo</button>
  </div>
</div>

bootstrap 4中心标题和右对齐按钮全部成一行

2 个答案: