Bootstrap бок о бок формы элементы

Question

Я пытаюсь сопоставить аналогичный макет с этим изображением, используя bootstrap 3+.

У меня все работает, за исключением раздела «Конец», где рядом с переключателями есть текстовые поля. Может ли кто-нибудь помочь мне с синтаксисом.

Я создал 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, я думаю, что бы точно построить то, что вы просили.

Edit:

Перетащите из элементов слева направо и просмотра HTML. Попробуйте построить здесь http://bootsnipp.com/j87klPolka/formbuilder3.html Это более ясно