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

Question

我有一组跨越多行的多个按钮，但是当一个按钮不再适合一行时，它只会进入下一行，剩余空间留空。相反，我希望按钮之间的间距相等，以使该行显示为完整的。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

我想让按钮最终间隔开，这样一行上有多个按钮，但每一行都是满的。有许多不同的示例显式创建列，但它们似乎都假设您知道将拥有多少个按钮/列，而不是拥有不同大小的按钮并自动调整它们之间的间距。我希望能够自动调整之间的间距，以便它们填满整行，例如将 1 2, 3 隔开，因此 1 从最左侧开始，3 在最右侧结束。我怎样才能做到这一点？

Answer 1

我发现您正在使用 Bootstrap，请查看 Flex。

您可以在父元素上使用类似：

d-flex flex-wrap justify-content-between

的内容。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 以相等的空间分布。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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

另一种方法是使用 卡片组 来放置任意数量的按钮，这些按钮的间距和大小均等，全部响应式地位于一行，位于

sm

断点上方。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>