Bootstrap 减少按钮中文本之间的 space

Question

这是我的代码：

<button class="btn btn-dark" style="margin: 0px 5px 10px 5px;background-color:#eeeeee" disabled>
  <h5 style="color:#000000"><i><b>1,39€</b></i></h5>
  <small style="color:#000000" class="FuelName"><b>@fuel.Name</b></small>
</button>

但我希望“1,39€”和“LNG”之间的距离接近，如何存档？

Answer 1

在 h5 元素你应该控制 margin-bottom，bootstrap 中的标题元素有一些默认值。

尝试这样的事情：

<button class="btn btn-dark" style="margin: 0px 5px 10px 5px;background-color:#eeeeee" disabled>
    <h5 style="color:#000000; margin-bottom:0"><i><b>1,39€</b></i></h5>
    <small style="color:#000000" class="FuelName"><b>@fuel.Name</b></small>
</button>

Answer 2

您可以简单地在 h5 选择器上使用 Bootstrap class m-0。

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <title>Bootstrap 5 / Inside Button spacing</title>
</head>

<body>
  <div class="m-2 p-2">
<h6>before</h6>
<button class="btn btn-dark" style="margin: 0px 5px 10px 5px;background-color:#eeeeee" disabled>
  <h5 style="color:#000000"><i><b>1,39€</b></i></h5>
  <small style="color:#000000" class="FuelName"><b>LNG</b></small>
</button>

<h6>after</h6>
<button class="btn btn-dark" style="margin: 0px 5px 10px 5px;background-color:#eeeeee" disabled>
  <h5 style="color:#000000" class="m-0"><i><b>1,39€</b></i></h5>
  <small style="color:#000000"><b>LNG</b></small>
</button>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  </div>
</body>

</html>

Bootstrap 减少按钮中文本之间的 space

Bootstrap reduce space between text in button

html

bootstrap-4