文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap -使子元素在col-lg-4类中水平对齐到中间

问Bootstrap -使子元素在col-lg-4类中水平对齐到中间
EN

Stack Overflow用户

提问于 2019-08-09 10:30:52

回答 2查看 103关注 0票数 0

我使用Bootstrap 4.3.1，并使用flex进行页面布局。

<div class='row d-flex align-items-center'>
                <div class='col-lg-12'>
                    <div class="form-group row">
                        <div class="col-lg-2">
                            <label class='col-form-label font-weight-bold display-6' for="inputDeploymentLocation">Deployment Location</label>
                        </div>
                        <div class="col-lg-10">
                            <select class="custom-select custom-select-lg mr-lg-2" id="inputDeploymentLocation" name='inputDeploymentLocation'>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

select元素当前是水平顶部对齐的。如何将select元素设置为在列中间水平对齐？

css

twitter-bootstrap

bootstrap-4

回答 2

Stack Overflow用户

发布于 2019-08-09 13:38:31

Bootstrap 4中的.row有display: flex，因此我们可以删除d-flex。.align-items-center只会影响直接的子进程。

<div class='row'>
  <div class='col-lg-12'>
    <div class="form-group row align-items-center">
      <div class="col-lg-2">
        <label class='col-form-label font-weight-bold display-6' for="inputDeploymentLocation">Deployment Location</label>
      </div>
      <div class="col-lg-10">
        <select class="custom-select custom-select-lg mr-lg-2" id="inputDeploymentLocation" name='inputDeploymentLocation'>
        </select>
      </div>
    </div>
  </div>
</div>

票数 0

Stack Overflow用户

发布于 2019-08-09 14:04:37

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body class="all">
    <div class="row">
      <div class='col-lg-12'>
        <div class="form-group row align-items-center">
          <div class="col-lg-2">
            <label class='col-form-label font-weight-bold display-6' for="inputDeploymentLocation">Deployment Location</label>
          </div>
          <div class="col-lg-10">
            <select class="custom-select custom-select-lg mr-lg-2" id="inputDeploymentLocation" name='inputDeploymentLocation'>
            </select>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

对直接父.row使用align-items-center希望它能有所帮助。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57422819

复制

相似问题

问Bootstrap -使子元素在col-lg-4类中水平对齐到中间
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap -使子元素在col-lg-4类中水平对齐到中间EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap -使子元素在col-lg-4类中水平对齐到中间
EN