Bootstrap 3 кнопки и вход для группировки в одну строку

Question

У меня есть пучок кнопок и текстовое поле ввода. Но они не выровнены правильно, как показано.

<div class="col-md-12 pull-right"> 
     <div class="pull-right"> 
      <button type="button" class="btn btn-default btn-xs"> << </button> 
      <button type="button" class="btn btn-default btn-xs"> < </button> 
      <button type="button" class="btn btn-default btn-xs"> > </button> 
      <button type="button" class="btn btn-default btn-xs"> >> </button> 
      <input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" /> 

     </div> 
</div> 

Есть ли способ, которым они выровненные в одном ряду? Также обратите внимание, что размер окна ввода выглядит иначе, чем другие. Есть ли способ исправить это тоже?

Answer 1

с использованием btn-group устраивает все кнопки в строке. как этот

<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" /> 
 
<div class="btn-group"> 
 
    <button type="button" class="btn btn-default btn-xs">&lt;&lt;</button> 
 
    <button type="button" class="btn btn-default btn-xs">&lt;</button> 
 
    <button type="button" class="btn btn-default btn-xs">&gt;</button> 
 
    <button type="button" class="btn btn-default btn-xs">&gt;&gt;</button> 
 
    <input type="number" style="width: 30px; margin-top:10px" class="form-control input-number input-xs" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" /> 
 
</div>

Примечание: При использовании HTML-символов (например <,>) в виде текста, а затем закодировать их, как я сделал (просто хорошая практика).

Docs btn-groups

И я использовал встроенный стиль для ввода номера типа margin-top:10px; потому input[type=number] в загрузчике имеет так, чтобы сбалансировать Использованная маржа-топ. Вместо этого вы можете использовать margin-bottom:0px

Как сказал @Mike Robinson, даже .input-append делает то же самое. разница закругленные границ и input-append превращается в input-group из version 3

<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" /> 
 
<div class="input-append"> 
 
    <button type="button" class="btn btn-default btn-xs">&lt;&lt;</button> 
 
    <button type="button" class="btn btn-default btn-xs">&lt;</button> 
 
    <button type="button" class="btn btn-default btn-xs">&gt;</button> 
 
    <button type="button" class="btn btn-default btn-xs">&gt;&gt;</button> 
 
    <input type="number" style="width: 30px; " class="form-control input-number input-xs" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" /> 
 
</div>

Answer 2

Вам нужна группа ввода. Вы можете добавлять группы кнопок по обе стороны от входа. Здесь они будут находиться на левой:

<div class="input-group"> 
    <div class="input-group-btn"> 
     <button type="button" class="btn btn-default"> << </button> 
     <button type="button" class="btn btn-default"> < </button> 
     <button type="button" class="btn btn-default"> > </button> 
     <button type="button" class="btn btn-default"> >> </button> 
    </div> 

    <input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" /> 
</div> 

Подробнее об этом здесь: http://getbootstrap.com/components/#input-groups-buttons-multiple

Answer 3

Стиль формы контроля на вашем входе вещь, которая движется его к следующей строке. Это происходит потому, что стиль управления формой в бутстрапе установлен на отображение: block. Добавляя новый стиль или делая встроенный стиль, вы можете получить их на одной странице.

Например:

<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" style="display: initial;" /> 

Или вы можете сделать класс, такие как:

.newInputControl{ 
display: inline; 
} 
<input type="number" style="width: 30px; " class="form-control input-number" placeholder="84" maxlength="4" value="34" min="0" max="9999" autocomplete="off" pattern="\d4" class="newInputControl" /> 

Вы также можете заботиться о нем, используя загрузчик, который построил основу для обработки этого путем размещения ваш контроль формы внутри группы ввода.

Answer 4

использования: формы контроля статической вместо форм-контроля во входном тексте