任意数量的按钮之间的等间距

Question

我有一组跨多行的多个按钮，但是当一个按钮不再适合一行时，它只会转到下一行，其余的 space 留空。相反，我希望在确实进入该行的按钮之间有相等的间距，以便该行看起来很满。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">



<div class="mx-auto" style="width: 90%;" >
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test'>

<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 2'>


<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 3'>

<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test Much Longer String That Makes This Multiple Lines 4'>

<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 5'>

</div>

我想让按钮最终 spaced 出来，这样一行上有多个按钮，但每一行都是满的。有许多明确创建列的不同示例，但它们似乎都假设您知道您将拥有多少 buttons/columns 与具有不同大小的按钮并自动调整它们之间的间距。我希望能够自动调整间距，以便它们填满整行，例如space out 1 2, 3 所以 1 从最左边开始，3 在最右边结束。我该怎么做？

Answer 1

我看到您正在使用 Bootstrap，查看 Flex。您可以在每个元素上使用类似的内容：d-flex flex-wrap justify-content-between。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<div class="w-90 mx-auto d-flex flex-wrap justify-content-between">
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test'>

<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 2'>


<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 3'>

<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test Much Longer String That Makes This Multiple Lines 4'>

<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 5'>

</div>

Answer 2

如果将 <div class="mx-auto"> 替换为类 <div class="d-flex justify-content-between">，链接将沿父级 div 在它们之间平均分配 space。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">



<div class="d-flex justify-content-between" style="width: 90%">
<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test'>

<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 2'>


<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 3'>

<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test Much Longer String That Makes This Multiple Lines 4'>

<input type='submit' name="my_button" class="btn btn-outline-primary me-3 mb-4 btn-lg btn-block" value='Test 5'>

</div>

另外，如果你想使用 mx-auto，你必须在你想要自动边距的元素上使用，在你的例子中是每个 <input>。请记住，该项目必须是 display: block 或 display: inline-block

Answer 3

另一种方法是对任意数量的按钮使用 card group，这些按钮的间距和大小都相等，所有按钮响应式地排在 sm 断点上方的一行上。

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


<div class="card-group mb-4">
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test'>
  </div>
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test 2'>
  </div>
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test 3'>
  </div>
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test Much Longer String That Makes This Multiple Lines 4'>
  </div>
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test 5'>
  </div>
</div>

<hr>

<div class="card-group mb-4">
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='another Test'>
  </div>
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='another Test 2'>
  </div>
  <div class="card mx-2">
    <input type='submit' name="my_button" class="btn btn-outline-primary btn-lg h-100 text-wrap" value='Test little Longer String'>
  </div>
</div>

任意数量的按钮之间的等间距

Equal Spacing Between Arbitrary Number of Buttons

html

css

bootstrap-5