bootstrap3型具有下拉

Question

我想創建一個類似如下的格式文本重疊：

我想出了這個樣子的。我或者可以讓下拉菜單佔用正確的空間量，但是文本位於下方，或者在下拉菜單旁邊顯示文字，所有內容都會被淹沒。

我不知道我在做什麼錯。下面是HTML：

<form class="schedulerBody form-horizontal" id="{{sourceCleaned}}"> 
<div class="form-group"> 
    <label class="col-sm-3 control-label">{{t "templates.scheduler.fireEvery"}}</label> 
    <div class="col-sm-8"> 
     <div class="form-inline"> 
      <div class="form-group"> 
       <select class="liveSyncSchedule form-control"></select> 
      </div> 
      <div class="form-group">{{t "templates.scheduler.seconds"}}</div> 
     </div> 
    </div> 
    <div class="col-sm-offset-3 col-sm-8"> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" />{{t "templates.scheduler.enabled"}} 
      </label> 
     </div> 
    </div> 
    <div class="col-sm-offset-3 col-sm-8"> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" />{{t "templates.scheduler.persisted"}} 
      </label> 
     </div> 
    </div> 
</div> 
<div class="form-group"> 
    <label class="col-sm-3 control-label">{{t "templates.scheduler.misfirePolicy"}}</label> 
    <div class="col-sm-8"> 
     <select class="misfirePolicy form-control"> 
      <option value="fireAndProceed">{{t "templates.scheduler.fireAndProceed"}}</option> 
      <option value="doNothing" selected>{{t "templates.scheduler.doNothing"}}</option> 
     </select> 
    </div> 
</div> 

所有幫助是非常感謝！

Answer 1

下面是一個簡化小提琴：https://jsfiddle.net/mz1xgr38/

<form class="form-horizontal"> 

    <div class="form-group"> 
     <label class="col-sm-3 control-label">Fire every</label> 
     <div class="col-sm-9"> 

      <div class="row"> 

       <div class="col-md-6"> 
        <select class="form-control"> 
         <option>1</option> 
         <option>2</option> 
         <option>3</option> 
        </select> 
       </div> 

       <div class="col-md-6"> 
        Seconds 
       </div> 

      </div> 

     </div> 
    </div> 

    <div class="form-group"> 
     <div class="col-sm-offset-3 col-sm-9 "> 
      <div class="checkbox"> 
       <label> 
        <input type="checkbox" />Enabled 
       </label> 
      </div> 
      <div class="checkbox"> 
       <label> 
        <input type="checkbox" />Persisted 
       </label> 
      </div> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="col-sm-3 control-label">Misfire policy</label> 
     <div class="col-sm-9"> 
      <select class="form-control"> 
       <option>Option 1</option> 
       <option>Option 2</option> 
      </select> 
     </div> 
    </div> 

</form> 

Answer 2

佈局出現混亂，因爲form-group類是不正確的處理。試試這個，

<form class="schedulerBody form-horizontal" id="{{sourceCleaned}}"> 
    <div class="form-group"> 
     <label class="col-sm-3 control-label">{{t "templates.scheduler.fireEvery"}}</label> 
     <div class="col-sm-8"> 
      <div class="form-inline"> 
       <select class="liveSyncSchedule form-control"></select> 
       <span>{{t "templates.scheduler.seconds"}}</span> 
      </div> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-offset-3 col-sm-8"> 
      <div class="checkbox"> 
       <label> 
        <input type="checkbox" />{{t "templates.scheduler.enabled"}} 
       </label> 
      </div> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-offset-3 col-sm-8"> 
      <div class="checkbox"> 
       <label> 
        <input type="checkbox" />{{t "templates.scheduler.persisted"}} 
       </label> 
      </div> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="col-sm-3 control-label">{{t "templates.scheduler.misfirePolicy"}}</label> 
     <div class="col-sm-8"> 
      <select class="misfirePolicy form-control"> 
       <option value="fireAndProceed">{{t "templates.scheduler.fireAndProceed"}}</option> 
       <option value="doNothing" selected>{{t "templates.scheduler.doNothing"}}</option> 
      </select> 
     </div> 
    </div> 
</form> 

謝謝！