Bootstrap并排表单元素

Question

我想使用bootstrap 3+来匹配与此图片类似的布局。

除了单选按钮旁边有文本框的Ends部分外，我已经全部工作了。有人可以帮助我的语法。

我创建了一个jsFiddle，我在哪里。 jsFiddle

<div class="form-group"> 
<label class="col-sm-2 control-label">Ends:</label> 
<div class="col-sm-6"> 
    <label class="radio-inline"> 
<input type="radio" name="ends" id="endsAfter" value="EndsAfter"> After      </label> 
<label> 
    <input type="text" class="form-control" name="afterOccur" id="afterOccur" disabled> occurrences </label> 
</div> 
</div> 
<div cass="input-group"> 
<div class="col-sm-6"> 
    <label class="radio-inline"> 
    <input type="radio" name="ends" id="endsOn" value="EndsOn">On</label> 
    <input type="text" class="form-control col-sm-4" name="onDate" id="onDate" disabled /> 
</div> 
</div> 

Answer 1

下面是一个例子，可能会给你至少一些东西。没有什么特别的，唯一的补充是一些CSS来保持标签与表单的其余部分一致。它只是使用偏移来正确排列所有内容，并将需要保持在一起的组控制在一起。您可以将列值更改为您实际需要的值，只需记住在整个表单中保持一致。见Forms。

见工作片段。

body { 
 
    padding-top: 30px; 
 
} 
 
#RepeatByBlock { 
 
    display: none; 
 
} 
 
@media (min-width: 768px) { 
 
    label.summary { 
 
    float: right; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <form name="form1" class="form-horizontal" method="post"> 
 
    <div class="form-group"> 
 
     <label class="control-label col-sm-2" for="Repeats">Repeats:</label> 
 
     <div class="col-sm-10"> 
 
     <Select name="Repeats" id="Repeats" class="form-control"> 
 
      <option value="weekly">Weekly</option> 
 
      <option value="monthly">Monthly</option> 
 
     </Select> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label class="control-label col-sm-2" for="RepeatEvery">Repeats Every:</label> 
 
     <div class="col-sm-8"> 
 
     <select name="RepeatEvery" id="RepeatEvery" class="form-control"> 
 
      <option value="1">1</option> 
 
      <option value="2">2</option> 
 
      <option value="3">3</option> 
 
      <option value="4">4</option> 
 
      <option value="5">5</option> 
 
      <option value="6">6</option> 
 
      <option value="7">7</option> 
 
      <option value="8">8</option> 
 
      <option value="9">9</option> 
 
      <option value="10">10</option> 
 
     </select> 
 
     </div> 
 
     <div class="col-sm-2"> 
 
     <label>Weeks</label> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label class="control-label col-sm-2">Repeat On:</label> 
 
     <div class="col-sm-10"> 
 
     <input type="checkbox" class="checkbox-inline" name="sunday" id="sunday" title="Sunday" /> S 
 
     <input type="checkbox" class="checkbox-inline" name="monday" id="monday" title="Monday" /> M 
 
     <input type="checkbox" class="checkbox-inline" name="tuesday" id="tuesday" title="Tuesday" /> T 
 
     <input type="checkbox" class="checkbox-inline" name="wednesday" id="wednesday" title="Wednesday" /> W 
 
     <input type="checkbox" class="checkbox-inline" name="thursday" id="thursday" title="Thursday" /> T 
 
     <input type="checkbox" class="checkbox-inline" name="friday" id="friday" title="Friday" /> F 
 
     <input type="checkbox" class="checkbox-inline" name="saturday" id="saturday" title="Saturday" /> S 
 
     </div> 
 
    </div> 
 
    <div id="RepeatByBlock" name="RepeatByBlock"> 
 
     <div class="form-group"> 
 
     <label class="col-sm-2 control-label">Multiple Time</label> 
 
     <div class="col-sm-10"> 
 
      <label class="radio-inline"> 
 
      <input type="radio" name="RepeatBy" id="RepeatByMonth" value="month" checked>Day of the Month</label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label class="control-label col-sm-2" for="startsOn">Starts On:</label> 
 
     <div class="col-sm-10"> 
 
     <input type="text" class="form-control" name="startsOn" id="startsOn" readonly /> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label class="control-label col-sm-2">Ends:</label> 
 
     <div class="col-sm-10"> 
 
     <div class="radio"> 
 
      <label> 
 
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">Never 
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-sm-2 col-sm-offset-2"> 
 
     <div class="radio"> 
 
      <label> 
 
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">After 
 
      </label> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
     <input type="text" class="form-control" name="afterOccur" id="afterOccur" disabled> 
 
     </div> 
 
     <label class="control-label col-sm-2" for="afterOccur">Occurrences</label> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-sm-2 col-sm-offset-2"> 
 
     <div class="radio"> 
 
      <label> 
 
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">On 
 
      </label> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <input type="text" class="form-control" name="onOccur" id="onOccur" disabled> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-sm-2"> 
 
     <label class="summary">Summary:</label> 
 
     </div> 
 
     <div class="col-sm-10"> 
 
     Weekly on Monday, until Jan 19, 2016 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-sm-8 col-sm-offset-2"> 
 
     <button class="btn btn-default" type="submit">Done</button> 
 
     <button class="btn btn-default" type="submit">Cancel</button> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

Answer 2

你怎么样通过拖放从这里http://bootsnipp.com/forms下降表单元素尝试引导建筑形态，我想这会正是建立你问什么。

编辑：从元件从左至右和视图HTML

拖动。尝试在这里建设http://bootsnipp.com/j87klPolka/formbuilder3.html更加清晰