使用 Bootstrap 4 对齐 div 中的项目

Posted 2023-03-05

【中文标题】使用 Bootstrap 4 对齐 div 中的项目

【英文标题】：Align the items in a div using Bootstrap 4

【发布时间】：2019-02-21 07:20:29

【问题描述】：

我是前端新手。我问的问题可能非常基本。 这里我使用 ReactJS。

所以实际上，我正在尝试这样做。所以，我尝试过的是

<div className="row">
    <div className="col-10" style=selectques>
        <div className="row">
            <div className="col-4">
                <span className="align-middle">1</span>
            </div>
        </div>
    </div>
    <div className="col-2">
    </div>
</div >

在这里，我尝试使用 select 但仍然无法正常工作。谁能建议我如何做到这一点？并按原样对齐？任何提示都会有所帮助。

【问题讨论】：

如果您愿意，我可以帮助您进行引导。没有反应js

请贴出所有相关代码。

是的，我想做引导

您想要垂直对齐行中的所有项目吗？

是的，我想将所有项目排成一行

【参考方案1】：

默认Bootstrap grid 使用弹性盒布局。这意味着行（具有.row 类的标签）具有display: flex。

基本上，这意味着您必须沿当前行的交叉轴对齐项目。为此，您应该使用align-items。 Bootstrap 已经有helper classes for it。所以你只需要在你的.row中添加一个合适的：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row align-items-center" style="background-color: #f7f7f7;">
  <div class="col">normal text</div>
  <div class="col-auto"> <input type="text"> </div>
  <div class="col"><h1>Big text</h1></div>
  <div class="col">
    <select>
      <option value="1" selected>Option 1</option>
      <option value="1">Option 2</option>
    </select>
  </div>
</div>

【讨论】：

实际上，发生了什么，当我添加一个选择元素时，它并没有采用该元素。

@GaneshKaspate 我用select 更新了代码 sn-p 并且它正确对齐