Можно ли настроить ширину контрольной метки в Bootstrap?

Question

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

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

Я не заинтересован в том, чтобы вникать в МЕНЬШЕ, это мой единственный вариант? Любые советы приветствуются.

<div class="container-narrow" style="width:700px"> 
     <div class="content"> 
      <div class="row-fluid"> 
       <div class="span5"> 
        <form class="form-horizontal" id="applies-Step1-form" action="/" method="post"> 
         <div class="control-group"> 
          <label class="control-label required" for="Step1_email">Email:</label> 
          <div class="controls"> 
           <input class="span12" size="50" maxlength="255" name="Step1[email]" id="Step1_email" type="text" /> 
          </div> 
         </div> 
        </form> 
       </div> 
       <div class="span7"> 
        <form class="form-horizontal" id="applies-Step1-form" action="/" method="post"> 
         <div class="control-group"> 
          <label class="control-label required" for="Step1_email">Thing1</label> 
          <div class="controls"> 
           <input class="span12" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" /> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 

</body> 

Answer 1

Одним из вариантов является использование .FORM-инлайн на форме, чтобы элементы формы на одной и той же линии.

Что-то вроде этого:

<form class="form-inline"> 
    <label>Email: 
     <input type="text" class="span1" name="email" /> 
    </label> 
    <label>Thing1 
     <input type="text" class="span3" name="thing1" /> 
    </label> 
</form> 

Если вы хотите больше расстояния до второй этикетки, вам нужны пользовательские CSS.

Answer 2

< этикетки класс = " контроль метки требуется " стиль = " ширина: 100px; обивка налево: 60px; " для = " Step1_email " > Электронная почта: </ярлык >

сохранить (ширина + обивка-слева) == 160