Проблема вертикального выравнивания с формой Boostrap - PullRequest
Новая
       0

Проблема вертикального выравнивания с формой Boostrap

0 голосов
/ 22 января 2019

У меня проблемы с выравниванием элементов по вертикали в форме поиска, над которой я работаю.

Я пытался заключить все в <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>

Я сделал загрузочный лист настоящего кода: https://www.bootply.com/CxtLh1XGT5

Я хочу, чтобы метка и селекторы были центрированы друг с другом, но, как вы можете видеть в bootply, это не так.

Может ли кто-нибудь с большим опытом CSS предложить помощь в том, что мне нужно сделать? Спасибо!

1 Ответ

0 голосов
/ 22 января 2019

Самый простой и чистый способ добиться этого - использовать 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>
...