Bootstrap 3: выполняет горизонтальную работу для переключателей с контрольной меткой?

Это потеряло несколько часов моего дня. Здесь очень простая форма, с 2 переключателями и ярлыком, на bootply. Это работает, как ожидалось, на 2.3.2: "Диапазон дат" слева, кнопки справа. На Bootstrap 3 все, в основном вертикальное, а не горизонтальное, текст выделен жирным шрифтом, и это просто беспорядок. Любые идеи, если не повторять это как сетку?

Благодарю.

РЕДАКТИРОВАТЬ

Это ожидаемый макет, когда B2.3.2 выбран при загрузке:

enter image description here

Это то, что я получаю, когда я выбираю любой B3+:

enter image description here

Ответы

Ответ 1

Чтобы делать то, что вы хотите сделать, вам нужно использовать классы col- *, так как все элементы формы имеют ширину 100%, поэтому вам нужно col- * исправить нужную ширину. Вы можете использовать col- xs- *, и он будет для всех размеров, а не реагирует:

enter image description here

ПРИМЕР: http://bootply.com/102912

<form class="form-horizontal">
 <fieldset>
  <div class="form-group">
   <label class="col-xs-3 control-label">Date Range</label>
   <div class="col-xs-9">
    <div class="radio">
     <label>
      <input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio">
      Radio 0</label>
    </div>
    <div class="radio">
     <label>
      <input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio">
      Radio 0</label>
    </div>
    <div class="radio">
     <label>
      <input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio">
      Radio 0</label>
    </div>
   </div>
  </div>
 </fieldset>
</form>

Если вам нужны радиостанции, флажки или другие элементы формы в одной строке без использования классов столбцов, класс для формы: .form-inline:

http://bootply.com/102908

<form class="form-inline">
   <div class="form-group">
    <label class="radio-inline">Date Range</label>
         <label class="radio-inline">
     <input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio">
     Radio 0</label>
    <label class="radio-inline">
     <input id="inlineradio2" name="sampleinlineradio" value="option2" type="radio">
     Radio 2</label>
    <label class="radio-inline">
     <input id="inlineradio3" name="sampleinlineradio" value="option3" type="radio">
     Radio 3</label>
    </div>
   <!--form-group-->
 </form>

Ответ 2

Мне нужна была такая же компоновка, но с горизонтальными и вертикальными радиоприемниками. Для Bootstrap 3.2 существует горизонтальная форма, которая хорошо работает с столбцами.

<form class="form-horizontal" role="form">

enter image description here

Полная форма

<link href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css'; return false;" rel="stylesheet"/>
<div class="container">
  <p class="bg-warning">Note: In the Stack Snippet, you may need to click "Full Page", otherwise the container is narrow enough to cause Bootstrap to stack the labels over the fields.</p>
    <form class="form-horizontal" role="form">

    <div class="form-group">
        <label class="col-sm-4 control-label">Season</label>
        <div class="col-sm-8">
            <label class="radio-inline"> <input type="radio" name="season" id="seasonSummer" value="summer" checked> Summer </label>
            <label class="radio-inline"> <input type="radio" name="season" id="seasonWinter" value="winter"> Winter </label>
            <label class="radio-inline"> <input type="radio" name="season" id="seasonSpringFall" value="spring-fall" disabled> Spring-Fall </label>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-4 control-label">Clouds</label>
        <div class="col-sm-8">
            <label class="radio-inline"> <input type="radio" name="clouds" id="Clear" value="clear" checked> Clear </label>
            <label class="radio-inline"> <input type="radio" name="clouds" id="Cloudy" value="cloudy"> Cloudy </label>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-4 control-label">Load Forecast</label>
        <div class="col-sm-8">
            <div class="radio">
                <label> <input type="radio" name="load" id="WeekdayAverage" value="weekdayaverage" checked> Weekday - Average </label>
            </div>
            <div class="radio">
                <label> <input type="radio" name="load" id="WeekdayPeak" value="weekdaypeak"> Weekday - Peak </label>
            </div>
            <div class="radio">
                <label> <input type="radio" name="load" id="Weekend" value="weekend" disabled> Weekend </label>
            </div>
        </div>
    </div>

    </form>
</div>