выравнивание по правому краю этикетки управления в виде горизонтальной

Question

Я пытаюсь сделать форму с двумя колонками, которая ведет себя следующим образом с использованием Twitter Bootstrap (3.2.0):

• на экстра-маленький (XS) экранов, второй столбец показан ниже первого столбца, над полями ввода показаны контрольные метки
• на небольших (см) экранах, два столбца показаны рядом друг с другом, над полями ввода показаны контрольные метки
• один носитель информации (md), два столбца показаны рядом друг с другом, управляющие метки горизонтально выровнены с их полями ввода

Мой код ниже (также на http://jsfiddle.net/mieckert/pfnbxbbo/) работает с одной проблемой: на маленьких экранах надписи отображаются над их полями ввода, но они выровнены по правому краю (вместо правильного выравнивания по левому краю).

Причиной этого является то, что самозагрузки в forms.less переключателей на выравнивание по правому краю на основе медиа-запроса:

form-horizontal { 
    @media (min-width: @screen-sm-min) { 
    .control-label { 
     text-align: right; 
     margin-bottom: 0; 
     padding-top: (@padding-base-vertical + 1); // Default padding plus a border 
    } 
    } 

Есть ли способ, я могу научить самозагрузки, чтобы использовать другой медиа-запрос (скажем, для @screen-md-min) без необходимо изменить исходный источник бутстрапа, т. е. переопределив его в другом файле меньшего размера, который имеет @import "bootstrap/less/bootstrap.less"? Особенно это возможно сделать таким образом, что я на самом деле не запрашиваю ширину экрана, а ширину текущего столбца? (В противном случае это повлияло бы на другие формы, которые имеют один столбцовый макет и все равно выравниваются по горизонтали). Или есть ли какие-либо другие, более эффективные способы достижения реагирующего поведения, которое я описал?

<div class="container-fluid"> 
     <form class="form-horizontal" role="form" action="#"> 
      <div class="col-xs-12 col-sm-6 col-md-6"> 
       <div class="form-group col-xs-12 col-sm-12 col-md-12"> 
        <label class="control-label col-xs-12 col-sm-12 col-md-3">First name</label> 
        <div class="col-xs-12 col-sm-12 col-md-9"> 
         <input type="email" class="form-control" placeholder="Enter email"/> 
        </div> 
       </div> 

       <div class="form-group col-xs-12 col-sm-12 col-md-12"> 
        <label class="control-label col-xs-12 col-sm-12 col-md-3">Last name</label> 
        <div class="col-xs-12 col-sm-12 col-md-9"> 
         <textarea class="form-control"> 
         </textarea> 
        </div> 
       </div> 
      </div> 

      <div class="col-xs-12 col-sm-6 col-md-6"> 
       <div class="form-group col-xs-12 col-sm-12 col-md-12"> 
        <label class="control-label col-xs-12 col-sm-12 col-md-3">Phone number</label> 
        <div class="col-xs-12 col-sm-12 col-md-9"> 
         <textarea class="form-control"> 
         </textarea> 
        </div> 
       </div> 

       <div class="form-group col-xs-12 col-sm-12 col-md-12"> 
        <label class="control-label col-xs-12 col-sm-12 col-md-3">Remarks</label> 
        <div class="col-xs-12 col-sm-12 col-md-9"> 
         <input type="email" class="form-control" placeholder="Enter email"/> 
        </div> 
       </div> 
      </div> 
     </form> 
    </div> 

Answer 1

Вы можете добавить класс left-label к каждому из лейблов в данной формы, а затем использовать этот CSS для выравнивания влево текст:

label.col-sm-12.left-label { 
     text-align: left; 
} 

JS Fiddle here.

Answer 2

У меня была такая же проблема, когда мне хотелось, чтобы надписи отображались над входом для размера экрана xs через col-xs-12. Я придумал следующий медиа-запрос и использование! Важно переопределить выравнивание текста, которое применяется при загрузке:

@media (min-width: 768px) { 
    label.col-xs-12 { 
     text-align: left !important; 
    } 
}