Как выравнивать элементы управления друг друга

Question

Я пытаюсь выровнять элементы управления html рядом друг с другом без огромного пространства, и я пытаюсь переопределить загрузку .css, но не повезло.

вот мой экран выглядит следующим образом:

Я создал JSFiddle, а также ниже мой HTML-код.

JSFIDDLE

<div class="row"> 
    <div class="col-xs-4"> 
    <div class="form-group1"> 
     <label class="col-xs-5 control-label" for="">Rows per page:</label> 

     <div class="col-xs-4"> 
     <form action="/SystemAdmin" id="form_header_pager" method="post" name= 
     "form_header_pager"> 
      <select class="form-control" data-val="true" data-val-number= 
      "The field PageSize must be a number." data-val-required= 
      "The PageSize field is required." id="PageSize" name= 
      "PageSizeSelect"> 
      <option selected="selected" value="10"> 
       10 
      </option> 

      <option value="25"> 
       25 
      </option> 

      <option value="50"> 
       50 
      </option> 

      <option value="ALL"> 
       ALL 
      </option> 
      </select> 
     </form> 
     </div> 
    </div> 
    </div> 

    <div class="col-xs-4"> 
    <div> 
     <div> 
     <b>Total records:</b> 0 
     </div> 
    </div> 
    </div> 

    <div class="col-xs-4"> 
    <div class="form-group1"> 
     <label class="col-xs-5 control-label" for="">Show Records:</label> 

     <div class="col-xs-7"> 
     <form action="/SystemAdmin" id="form_header_show_records" method="post" 
     name="form_header_show_records"> 
      <select class="form-control" id="ShowRecords" name="showrecords"> 
      <option value="all"> 
       Show All Records 
      </option> 

      <option value="invalid"> 
       Show Invalid Records 
      </option> 

      <option value="valid"> 
       Show Valid Records 
      </option> 
      </select> 
     </form> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Большие пространства внутри макета вызываются с использованием ширины столбцов сетки. Bootstrap предоставляет inline form element styling, и рекомендуется использовать это вместо столбцов сетки.

Дополнительная настройка CSS, которую я должен был сделать, была вашей общей площадью. Так как у него не было элемента ввода или выбора, вертикальное выравнивание было слегка выключено. Если у вас был ряд входов (как показано в документации Bootstrap), вам не понадобится дополнительный CSS.

Вы можете просмотреть этот скорректированный фрагмент кода ниже. Обратите внимание, что вы должны запустить его в режиме «Полная страница», чтобы просмотреть его правильно. По умолчанию инструмент form-inline работает только в видовых экранах размером более 768 пикселей.

.record-results { 
 
    display: inline-block; 
 
    margin-bottom: 3px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="form-inline"> 
 
    <div class="form-group"> 
 
     <form action="/SystemAdmin" id="form_header_pager" method="post" name="form_header_pager"> 
 
      <label for="PageSize">Rows per page:</label> 
 
      <select class="form-control" data-val="true" data-val-number="The field PageSize must be a number." data-val-required="The PageSize field is required." id="PageSize" name="PageSizeSelect"> 
 
       <option selected="selected" value="10">10</option> 
 
       <option value="25">25</option> 
 
       <option value="50">50</option> 
 
       <option value="ALL">ALL</option> 
 
      </select> 
 
     </form> 
 
    </div> 
 
    <div class="form-group "> 
 
     <span class="record-results"><strong>Total records:</strong> 0</span> 
 
    </div> 
 
    <div class="form-group"> 
 
     <form action="/SystemAdmin" id="form_header_show_records" method="post" name="form_header_show_records"> 
 
      <label for="showrecords">Show Records:</label> 
 
      <select class="form-control" id="ShowRecords" name="showrecords"> 
 
       <option value="all">Show All Records</option> 
 
       <option value="invalid">Show Invalid Records</option> 
 
       <option value="valid">Show Valid Records</option> 
 
      </select> 
 
     </form> 
 
    </div> 
 
</div>

Answer 2

JSBIN

ваш макет смущало меня. Поэтому я сделал еще один, чтобы достичь. Ключевой код:

<form class="form-inline"> 
    <div class="form-group"> 
    <label for="exampleInputName2">Rows per page:</label> 
    <select name="" id="" class="form-control"> 
     <option value="1">test</option> 
     <option value="1">test</option> 
     <option value="1">test</option> 
    </select> 
    </div> 
    <div class="form-group"> 
    <label for="exampleInputEmail2">Total records:</label> 
    <span class="text-danger">99</span> 
    </div> 
    <div class="form-group"> 
    <label for="exampleInputName2">Show Records:</label> 
    <select name="" id="" class="form-control"> 
     <option value="1">test</option> 
     <option value="1">test</option> 
     <option value="1">test</option> 
    </select> 
    </div> 
</form>