Это потеряло несколько часов моего дня. Здесь очень простая форма, с 2 переключателями и ярлыком, на bootply. Это работает, как ожидалось, на 2.3.2: "Диапазон дат" слева, кнопки справа. На Bootstrap 3 все, в основном вертикальное, а не горизонтальное, текст выделен жирным шрифтом, и это просто беспорядок. Любые идеи, если не повторять это как сетку?
Благодарю.
РЕДАКТИРОВАТЬ
Это ожидаемый макет, когда B2.3.2 выбран при загрузке:
Это то, что я получаю, когда я выбираю любой B3+:
Чтобы делать то, что вы хотите сделать, вам нужно использовать классы col- *, так как все элементы формы имеют ширину 100%, поэтому вам нужно col- * исправить нужную ширину. Вы можете использовать col- xs- *, и он будет для всех размеров, а не реагирует:
ПРИМЕР: 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:
<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>
Мне нужна была такая же компоновка, но с горизонтальными и вертикальными радиоприемниками. Для Bootstrap 3.2 существует горизонтальная форма, которая хорошо работает с столбцами.
<form class="form-horizontal" role="form">
<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>