如何删除bootstrap中的额外填充

Question

​

如何删除容器右侧的多余空间？

​

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container w-75 mx-auto p-3 my-3 bg-dark">
  <button class="w-50 p-3 my-2">GENERAL FUND</button><button class="w-25 p-3 mx-2">REPORT</button><br>
  <button class="w-50 p-3 my-2">TRUST FUND</button><button class="w-25 p-3 mx-2">REPORT</button><br>
  <button class="w-50 p-3 my-2">SPECIAL EDUCATIONAL FUND</button><button class="w-25 p-3 mx-2">REPORT</button><br>
  <button class="w-50 p-3 my-2">CTC- INDIVIDUAL</button><button class="w-25 p-3 mx-2">REPORT</button><br>
  <button class="w-50 p-3 my-2">CTC- CORPORATION</button><button class="w-25 p-3 mx-2">REPORT</button>
</div>

​

Answer 1

Bootstrap有很多您可以使用的本机类。不需要添加使用<br>

此外，要删除填充，只需将按钮包装在div中，并为每个按钮提供一个类d-flex和w-50

您可以根据需要在按钮之间添加空格(margin)。

运行下面的代码片段。

​

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container w-75 mx-auto p-3 my-3 bg-dark">

  <div class="d-flex justify-content-between">
    <button class="w-75">GENERAL FUND</button>
    <button class="w-25">REPORT</button>
  </div>

  <div class="d-flex">
    <button class="w-75">TRUST FUND</button>
    <button class="w-25">REPORT</button>
  </div>

  <div class="d-flex">
    <button class="w-75">SPECIAL EDUCATIONAL FUND</button>
    <button class="w-25">REPORT</button>
  </div>

  <div class="d-flex">
    <button class="w-75">CTC- INDIVIDUAL</button>
    <button class="w-25">REPORT</button>
  </div>
  <div class="d-flex">
    <button class="w-75">CTC- CORPORATION</button>
    <button class="w-25">REPORT</button>
  </div>

</div>

​

Answer 2

很简单，你可以这样做……

​

.container{
  margin:auto;
  text-align:center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container w-100 mx-auto p-3 my-3 bg-dark">
  <button class="w-50 p-3 my-2">GENERAL FUND</button><button class="w-25 p-3 mx-2">REPORT</button><br>
  <button class="w-50 p-3 my-2">TRUST FUND</button><button class="w-25 p-3 mx-2">REPORT</button><br>
  <button class="w-50 p-3 my-2">SPECIAL EDUCATIONAL FUND</button><button class="w-25 p-3 mx-2">REPORT</button><br>
  <button class="w-50 p-3 my-2">CTC- INDIVIDUAL</button><button class="w-25 p-3 mx-2">REPORT</button><br>
  <button class="w-50 p-3 my-2">CTC- CORPORATION</button><button class="w-25 p-3 mx-2">REPORT</button>
</div>

​