Bootstrap 3：form-horizo​​ntal 是否适用于带有控制标签的单选按钮？

Question

这浪费了我一天的好几个小时。这是一个非常简单的表单，在bootply 上有两个单选按钮和一个标签。这在 2.3.2 上按预期工作：左侧的“日期范围”，右侧的按钮。在 Bootstrap 3 上，一切都出来了，它基本上是垂直的而不是水平的，文本是粗体的，只是一团糟。有什么想法，除了重新做一个网格吗？

谢谢。

编辑

这是预期的布局，当在 bootply 上选择 B2.3.2 时：

这是我选择任何 B3+ 时得到的结果：

Answer 1

我需要相同的布置，但同时使用水平和垂直收音机。对于 Bootstrap 3.2，有一个 form-horizo​​ntal 可以很好地与列一起使用。

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

完整表格

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" 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>

Answer 2

要做你想做的事，你必须使用 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：

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>