css - Bootstrap 表单的垂直对齐问题

Question

我在使我正在处理的搜索表单中垂直对齐元素时遇到问题。

我已经尝试将所有内容包含在 <div class="form-row align-items-center"> 中但它仍然没有居中。

基本上我有:

<form class="form-inline" method="get">    
    <div class="panel panel-default">        
        <div id="searchheading" class="panel-heading search-collapse">
        </div>

        <div class="panel-body collapse in" id="search">
            <div class="form-row align-items-center">
                <div class="form-group col-md-2">
                    Label and select here
                </div>

              <div class="form-group col-md-5">

                Label and select here
              </div>


                <div class="form-group col-md-3">
                    <input class="form-control" id="SearchString" name="SearchString" type="text" value="">
                </div>

                <input id="Search" type="submit" class="btn btn-default" value="Search">
                <a class="btn btn-default" href="ClearSearch">Clear</a>
            </div>
        </div>
    </div>
</form>

我在这里制作了一个实际代码的bootply:https://www.bootply.com/CxtLh1XGT5

我希望标签和选择都彼此居中，但正如您在 bootply 中看到的那样，它们不是。

有更多 CSS 经验的人可以就我需要做什么提供帮助吗？谢谢!

Answer 1

实现此目的的最简单和最干净的方法是使用 css flex。

@media(min-width: 768px){
  .vertical-align {
    display: flex;
    align-items: center;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<form class="form-inline" method="get">

  <div class="visible-xs-block" id="xs-check"></div>
  <div class="panel panel-default">

    <div id="searchheading" class="panel-heading search-collapse">

      <b data-toggle="collapse" href="#search" aria-expanded="true" aria-controls="search">
                Search
                <i class="glyphicon glyphicon-chevron-up pull-right"></i>
                <i class="glyphicon glyphicon-chevron-down pull-right"></i>

            </b>
    </div>

    <div class="panel-body collapse in" id="search">
      <div class="form-row vertical-align">
        <div class="form-group col-md-2">
          <label for="SelectedStatus">Status</label>
          <select class="form-control" id="SelectedStatus" name="SelectedStatus">
            <option selected="selected" value="0">Open</option>
            <option value="1">Closed</option>
            <option value="2">All</option>
          </select>
        </div>

        <div class="form-group col-md-5">

          <label for="SelectedBuildingList">Building</label>
          <select class="chosen form-control" id="SelectedBuildingList" multiple="multiple" name="SelectedBuildingList" style="width: 85%;">
            <option selected="selected" value="1">B1</option>
            <option selected="selected" value="2">B2</option>
            <option selected="selected" value="3">B3</option>
            <option selected="selected" value="4">B4</option>
          </select>
        </div>


        <div class="form-group col-md-3">
          <input class="form-control" id="SearchString" name="SearchString" type="text" value="">
        </div>
        <div class="form-group col-md-2">
          <input id="Search" type="submit" class="btn btn-default" value="Search">
          <a class="btn btn-default" href="ClearSearch">Clear</a>
        </div>
      </div>
    </div>
  </div>
</form>