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> 

谢谢！