html - 使用 Bootstrap 4 对齐 div 中的元素

Question

我是前端新手。我问的问题可能非常基础。这里我使用的是 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 但它仍然无法正常工作。谁能建议我该怎么做？并按原样对齐？任何提示都会有所帮助。

Answer 1

默认 Bootstrap grid使用 flexbox 布局。这意味着行(具有 .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>