bootstrap - тот же размер ввода в форму

Question

Я пытаюсь создать таблицу ввода для простой формы, где каждый вход имеет метку. Чтобы сосредоточить форму, я использовал col-md-6 col-md-offset-3.

Моя проблема в том, что все входы имеют одинаковый размер. Вот в результате jsfiddle, и мой код:

<div class="container"> 
     <div class="row"> 
     <div class="col-md-6 col-md-offset-3"> 
     <form role="form"> 
     <table class="table table-condensed"> 
     <tr> 
     <td> 
      <label for="lab1">Longueur 1</label> 
      <input type="text" class="form-control" id="lab1" /> 
     </td> 
     <td> 
      <label for="lab2">Longueur 2</label> 
      <input type="text" class="form-control" id="lab2" /> 
     </td> 
     <td> 
      <label for="lab3">Longueur 3</label> 
      <input type="text" class="form-control" is="lab3" /> 
    </td> 
     <td> 
      <label for="lab4">Masse 1</label> 
      <input type="text" class="form-control" id="lab4" /> 
     </td> 
     <td> 
      <label for="lab5">Masse 2</label> 
      <input type="text" class="form-control" id="lab5" /> 
     </td> 
     <td> 
      <label for="lab6">Masse 3</label> 
      <input type="text" class="form-control" is="lab6" /> 
    </td> 
     </tr> 
    <tr> 
     <td> 
      <label for="lab7">Angle 1</label> 
      <input type="text" class="form-control" id="lab7" /> 
     </td> 
     <td> 
      <label for="lab8">Angle 2</label> 
      <input type="text" class="form-control" id="lab8" /> 
     </td> 
     <td> 
      <label for="lab9">Angle 3</label> 
      <input type="text" class="form-control" is="lab9" /> 
    </td> 
    <td> 
      <label for="lab7">Vitesse 1</label> 
      <input type="text" class="form-control" id="lab7" /> 
     </td> 
     <td> 
      <label for="lab8">Vitesse 2</label> 
      <input type="text" class="form-control" id="lab8" /> 
     </td> 
     <td> 
      <label for="lab9">Vitesse 3</label> 
      <input type="text" class="form-control" is="lab9" /> 
    </td> 
     </tr> 
     </table> 
     </form> 
     </div> 
     </div> 
     </div> 

Как вы можете видеть, для двух линий, три «вход» на правой меньше, чем те, с левой стороны.

Как я могу исправить это и установить одинаковый размер для входа 12?

Answer 1

Это связано с длиной метки, если вы попытаетесь изменить ее, вы увидите таблицу, соответствующую настройке, так же, как таблица должна вести себя читаемой.

Попробуйте вместо того, чтобы использовать сетку Bootstrap, создавая два .row с и вмещающих каждый label + input в .col-xs-2. Это обеспечит получение шести равномерно распределенных полей.

Answer 2

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

Как правильно сказал бардо, из-за длины метки эти длины различны. Один из вариантов - отображать только 3 элемента на строку на небольших устройствах, а затем переключиться на 6, когда вы нажмете 768 пикселей (экраны iPad). Для этого нужно использовать этот код для каждого элемента:

... 
    <div class="col-xs-4 col-sm-2"> 
    <label for="lab1">Longueur 1</label> 
    <input type="text" class="form-control" id="lab1" value="12345678" /> 
    </div> 
... 

Конечно, вы можете обнаружить, что все еще не достаточно для крошечного (т.е. мобильного) экрана, так что может быть даже лучше, чтобы показать один элемент за линии, пока вы не нажмете 768px:

... 
    <div class="col-sm-2"> 
    <label for="lab1">Longueur 1</label> 
    <input type="text" class="form-control" id="lab1" value="12345678" /> 
    </div> 
... 

Вот скрипку: http://jsfiddle.net/vwx6gnx4/8/ вы увидите, что на маленьком экране у вас есть 4 строки из 3 элементов, что означает, что есть место для всех меток, которые будут отображаться.