css - 具有响应宽度和连续两个按钮的输入

Question

我正在寻找一种方法来实现文本输入和两个相邻的两个按钮，按钮占用尽可能多的水平空间，而输入占用剩余空间。我还希望元素之间的边距较小，我更喜欢使用 Bootstrap 4 类来实现这一点。

我希望我可以使用三个 col-auto div，但这样输入就固定在大约 150 像素:

<!-- Input. This should be as wide as possible. -->
<div class='col-auto'>
    <input class='form-control'
           type='text'>
</div>

<!-- 1st button -->
<div class='col-auto'>
    <button class='btn btn-primary'>
        DO that
    </button>
</div>

<!-- 2nd button -->
<div class='col-auto'>
    <button class='btn btn-primary'>
        Do that
    </button>
</div>

是否有一种优雅的方式来实现我想要的？

Answer 1

首先，确保您使用的是最新的 Bootstrap CSS CDN 链接:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

接下来，这是代码，试试这个:

  <div class="container-fluid">
    <!-- 1st button -->
    <div class="row">
      <div class='col-auto'>
        <button class='btn btn-primary'>Do This</button>
      </div>

      <!-- 2nd button -->
      <div class='col-auto'>
        <button class='btn btn-primary'>Do This</button>
      </div>

      <!-- Input. This should be as wide as possible. -->
      <div class='col w-100'>
        <input class='form-control' type='text'>
      </div>
    </div>
  </div>

总而言之，使用container-fluid，然后row，然后在按钮上使用col-auto，在输入上使用col和w-100。