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

Question

我有一组跨越多行的多个按钮，但是当一个按钮不再适合在一条线上时，它只是在下一行上，剩下的空间是空的。相反，我想在按钮之间设置相等的间距，这样行看起来就满了。

<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>

​

我想这样做，使按钮的最后间隔，使有多个按钮在一条线上，但每一行是满的。有许多不同的例子可以显式地创建列，但它们似乎都假设您知道您将拥有多少个按钮/列，而不是有不同大小的按钮，并自动调整它们之间的间距。我希望能够自动调整间距，这样他们就能填满整条线，例如空格1 2，3 so 1从最左边开始，3末端在极右。我怎么能这么做？

Answer 1

我看你用的是Bootstrap，看看Flex。您可以在perent元素上使用这样的东西: d-flex、flex-perent wrap content。

<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在它们之间以相等的空间分布。

​

<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

另一种方法是对任意数目的按钮使用卡片组，这些按钮的间距相同，大小相等，所有按钮都响应地位于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>

​