如何使同一行上的两个按钮和 select 元素之间的距离相同？

Question

我使用Bootstrap 5，我试图在同一行放置一个select和2个按钮（select应该在中间，一个按钮在右侧select，左边还有一个按钮），但是两件事我都没有成功

在select和按钮
使按钮和 div 末端之间的距离相同。

如图所示：select 应该包含行中的大部分 space，按钮不应触及 select，按钮不应触及 div 末端.问题是关于按钮和 select 之间的距离以及 按钮和 div 端之间的距离。

请看图片。（在小屏幕上可以更清楚地看到问题）

HTML：（我不使用其他 CSS 文件）

            <div class="row mt-3 mb-2 text-center">
                <div class="col-2">
                    <button class="btn btn-success">Prev</button>
                </div>
                <div class="col-8">
                    <select class="form-select" aria-label="Default select example">
                        <option selected>Open this select menu</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                </div>
                <div class="col-2">
                    <button class="btn btn-success">Next</button>
                </div>
            </div>

注意：html中没有包含边框，我用画图编辑器添加了边框只是为了更好地查看情况。

Answer 1

我会使用简单的 flex layout instead of trying to bang columns into shape. Use flex-fill on the center element to get it to stretch, and add horizontal (x-axis) margin & padding 作为间距。我使用两者来匹配默认的容器填充。如果您不使用容器，您当然可以使用其他组合。

body {
  background: pink !important; /* for spacing visualization */
}

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

<div class="container-fluid my-2">
  <div class="d-flex justify-content-between">
    <div>
      <button class="btn btn-success">Prev</button>
    </div>

    <div class="flex-fill mx-2 px-1">
      <select class="form-select" aria-label="Default select example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>

    <div>
      <button class="btn btn-success">Next</button>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Answer 2

我认为你应该使用 Flexbox 而不是这个，因为 flex 实际上是在容器中均匀分布项目的最佳方式。

<div class="row mt-3 mb-2 text-center" style="display: flex; justify-content: space-evenly"> <!-- You can also try space-around and space-between instead of space-evenly if that suits your purpose -->

                <div class="col-2">
                    <button class="btn btn-success">Prev</button>
                </div>
                <div class="col-8">
                    <select class="form-select" aria-label="Default select example">
                        <option selected>Open this select menu</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                </div>
                <div class="col-2">
                    <button class="btn btn-success">Next</button>
                </div>
            </div>

如何使同一行上的两个按钮和 select 元素之间的距离相同？

How can I get the same distance between two buttons and a select element on the same line?

html

css

twitter-bootstrap

alignment

centering