2014-11-25 3 views
0

У меня есть следующая проблема в стилизации элементов управления формы У меня есть Bootstrap 2.3.2Как выровнять эти две строки с помощью Bootstrap 2.3.1?

У меня есть две строки внутри панели. Каждая строка делится на две части. Каждый пролет имеет форму. По-видимому, ряды полуподобны друг другу, но они не выровнены. Есть ли способ выровнять их с переопределением всего стиля бутстрапа?

<div class="container-fluid"> 
    <div class="panel panel-info"> 
     <div class="panel-heading"> 
      Summary Report 
     </div> 
     <div class="row-fluid"> 
      <div class="span4"> 
       <div class="form-inline"> 
        <label>Weekly Total</label> 
        <input type="text" value="22MM" /> 
       </div> 
      </div> 
      <div class="span8"> 
       <div class="form-inline"> 
        <label>Days' Total</label> 
        <input type="text" value="111" class="input-mini" /> 
        <input type="text" value="111" class="input-mini" /> 
        <input type="text" value="111" class="input-mini" /> 
        <input type="text" value="111" class="input-mini" /> 
        <input type="text" value="111" class="input-mini" /> 
        <input type="text" value="111" class="input-mini" /> 
        <input type="text" value="111" class="input-mini" /> 
       </div> 
      </div> 
     </div> 
     <div class="row-fluid top-buffer"> 
      <div class="span4"> 
       <div class="form-inline"> 
        <label>Monthly Per Total</label> 
        <input type="text" value="33MM" /> 
       </div> 
      </div> 
      <div class="span8"> 
       <div class="form-inline text-center"> 
        <label>Monthly Total</label> 
        <input type="text" value="111" class="input-mini" /> 
        <input type="text" value="111" class="input-mini" /> 
        <input type="text" value="111" class="input-mini" /> 
        <input type="text" value="111" class="input-mini" /> 
        <input type="text" value="111" class="input-mini" /> 
        <input type="text" value="111" class="input-mini" /> 
        <input type="text" value="111" class="input-mini" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Вот снимок из того, что я получил до сих пор:

enter image description here

ответ

0

Я бы просто пространство метки и входы с классом Spanx и совместите метки, как мне они нужны (текст-левый, текстовый и т. д.), поэтому примените это к исходному коду:

<div class="container-fluid"> 
<div class="panel panel-info"> 
    <div class="panel-heading"> 
     Summary Report 
    </div> 
    <div class="row-fluid"> 
     <div class="span4"> 
      <div class="form-inline"> 
       <label class="span4 text-right">Weekly Total</label> 
       <input class="span8" type="text" value="22MM" /> 
      </div> 
     </div> 
     <div class="span8"> 
      <div class="form-inline"> 
       <label class="span4 text-right">Days' Total</label> 
       <input type="text" value="111" class="input-mini span1" /> 
       <input type="text" value="111" class="input-mini span1" /> 
       <input type="text" value="111" class="input-mini span1" /> 
       <input type="text" value="111" class="input-mini span1" /> 
       <input type="text" value="111" class="input-mini span1" /> 
       <input type="text" value="111" class="input-mini span1" /> 
       <input type="text" value="111" class="input-mini span1" /> 
      </div> 
     </div> 
    </div> 

    <div class="row-fluid top-buffer"> 
     <div class="span4"> 
      <div class="form-inline"> 
       <label class="span4 text-right">Monthly Per Total</label> 
       <input class="span8" type="text" value="33MM" /> 
      </div> 
     </div> 
     <div class="span8"> 
      <div class="form-inline "> 
       <label class="span4 text-right">Monthly Total</label> 
       <input type="text" value="111" class="input-mini span1" /> 
       <input type="text" value="111" class="input-mini span1" /> 
       <input type="text" value="111" class="input-mini span1" /> 
       <input type="text" value="111" class="input-mini span1" /> 
       <input type="text" value="111" class="input-mini span1" /> 
       <input type="text" value="111" class="input-mini span1" /> 
       <input type="text" value="111" class="input-mini span1" /> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 
Смежные вопросы