如何在引導排

Question

我想舉上面的html樣式的單行顯示的控件和文本，但只能得到下面的輸出，爲MD/LG顯示器。 以下爲xs/sm顯示。

我希望避免指定文本元素的列寬度，並試圖組合所有這些都無法正確呈現。 對此的任何幫助將是非常好的，謝謝您提前。

 <!-- Time row --> 
         <div class="form-group"> 
          <div class="row"> 
           <label class="control-label col-xs-2">Time:</label> 
           <div class="col-lg-2"> 

            <select class="form-control "> 
             <option style="font-weight:bold">Monday</option> 
             <option>Tuesday</option> 
             <option>Wednesday</option> 
             <option>Thursday</option> 
             <option>Friday</option> 
             <option>Saturday</option> 
             <option>Sunday</option> 
            </select> 
           </div> 

           <div class="col-lg-3"> 
            <div class="bootstrap-timepicker"> 
             <div class="input-group"> 
              <div class="input-group-addon no-border" style="font-weight: bold;"> 
               At 
              </div> 
              <input type="text" class="form-control timepicker" /> 
              <div class="input-group-addon"> 
               <i class="fa fa-clock-o"></i> 
              </div> 
             </div><!-- /.input group --> 
            </div><!-- /.form group --> 
           </div> 
           <div class="col-lg-3"> 
           <div class="input-group"> 
            <div class="input-group-addon no-border" style="font-weight: bold;"> 
             For 
            </div> 
            <input type="text" class="form-control" placeholder="" /> 
           </div> 
           </div> 
           <label class="control-label" style="font-weight: bold;">Minutes</label> 
          </div> 
         </div> 
         <!-- Location row --> 
         <div class="form-group"> 
          <div class="row"> 
           <label class="control-label col-xs-2">Location:</label> 

           <div class="col-lg-4"> 

            <select class="form-control "> 
             <option style="font-weight:bold">Court 1</option> 
             <option>Court 2</option> 
             <option>Court 3</option> 
             <option>Court 4</option> 
             <option>Gymnasium</option> 
             <option>Dance Studio</option> 
             <option>Main Hall</option> 
            </select> 
           </div> 
           <div class="col-lg-4"> 

            <select class="form-control "> 
             <option style="font-weight:bold">Clapham</option> 
             <option>Balham</option> 
             <option>Brixton</option> 
             <option>Wembly</option> 
             <option>New York</option> 
             <option>Paris</option> 
             <option>Peckham</option> 
            </select> 
           </div> 
          </div> 
         </div> 

Answer 1

我使用layoutit.com，並得到了一個嵌套的行，給出了所需的控制和顯示。

<!--Experiment 5 from layoutit.com--> 
<div class="container"> 
    <div class="row clearfix"> 
     <div class="col-md-4 column"> 
      <form class="form-horizontal" role="form"> 
       <div class="form-group"> 
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
        <div class="col-sm-10"> 
         <input type="email" class="form-control" id="inputEmail3" /> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 
        <div class="col-sm-10"> 
         <input type="password" class="form-control" id="inputPassword3" /> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10"> 
         <div class="checkbox"> 
          <label><input type="checkbox" /> Remember me</label> 
         </div> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10"> 
         <button type="submit" class="btn btn-default">Sign in</button> 
        </div> 
       </div> 
      </form> 
     </div> 
     <div class="col-md-4 column"> 
      <div class="row clearfix"> 
       <div class="col-md-8 column"> 
        <button type="button" class="btn btn-default">Default</button> 
       </div> 
       <div class="col-md-4 column"> 
        <span class="label label-danger">Label</span> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-4 column"> 
      <div class="row clearfix"> 
       <div class="col-md-8 column"> 
        <button type="button" class="btn btn-default">Default</button> 
       </div> 
       <div class="col-md-4 column"> 
        <span class="label label-default">Label</span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

您是否已經在父表單上使用Bootstrap的.inline-form類？檢查出Bootstrap Documentation。