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

时间：2019-08-09 02:30:52

标签： css twitter-bootstrap bootstrap-4

我使用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>

enter image description here

select元素当前在水平方向上对齐。如何设置选择元素在列中间水平对齐？

2 个答案:

答案 0 :(得分：0)

Bootstrap 4中的

.row 具有显示：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>

答案 1 :(得分：0)

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

使用align-items-center作为前一父项.row 希望会有所帮助。

相关问题
最新问题