如何将输入集中在按钮之间(bootstrap5)

Question

我想把输入集中在这两个按钮之间，但我尝试了我所知道的一切，但没有什么是可行的：(下面是一张它现在的样子的图片，我希望它更小，在1行之间)。

​

​

​

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<div class="card-footer">
  <div class="container d-flex">
    <div class="div mx-auto">
      <a href="#" class="btn btn-danger">-</a>
      <input type="text" class="form-control" placeholder="0">
      <a href="#" class="btn btn-success">+</a>
    </div>

​

Answer 1

也许您可以在div容器中使用d-flex类来启用flex布局。

​

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<div class="card-footer">
  <div class="container d-flex">
    <div class="d-flex mx-auto">
      <a href="#" class="btn btn-danger">-</a>
      <input type="text" class="form-control" placeholder="0" />
      <a href="#" class="btn btn-success">+</a>
    </div>
  </div>
</div>

​

Answer 2

只需在div容器中使用input-group类即可。

​

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Body -->
<div class="card-footer">
  <div class="container d-flex">
    <div class="input-group">
      <a href="#" class="btn btn-danger">-</a>
      <input type="text" class="form-control" placeholder="0">
      <a href="#" class="btn btn-success">+</a>
    </div>
  </div>
</div>

​

Answer 3

在css文件中：

。

.div.mx-auto{
    font-size:0;
}
.div.mx-auto a,
.div.mx-auto input{
    display:inline-block;
    vertical-align:middle;
    font-size: 1rem;
}