twitter-bootstrap Bootstrap 3：表单水平是否适用于带有控制标签的单选按钮？

Bootstrap 3: does form-horizontal work for radio buttons with a control-label?

提问by EML

This has wasted several hours of my day. Here's a very simple form, with 2 radio buttons and a label, on bootply. This works as expected on 2.3.2: 'Date Range' on the left, buttons on the right. On Bootstrap 3, everything's out, it's basically vertical instead of horizontal, the text is bold, and it's just a mess. Any ideas, short of re-doing this as a grid?

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

Thanks.

谢谢。

EDIT

编辑

This is the expected layout, when B2.3.2 is selected on bootply:

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

This is what I get when I select any B3+:

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

回答by Flint O'Brien

I needed the same arrangement but with both horizontal and vertical radios. For Bootstrap 3.2, there is a form-horizontal that works nicely with columns.

我需要相同的安排，但同时使用水平和垂直无线电。对于 Bootstrap 3.2，有一个水平表单可以很好地与列配合使用。

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

Full 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>

回答by Christina

To do what you want to do, you do have to use col-* classes as all form elements are 100% width, so you have to have a col-* to fix the width you want. You can use col-xs-* and it will be for all sizes, not responsive:

要做你想做的事，你必须使用 col-* 类，因为所有表单元素都是 100% 宽度，所以你必须有一个 col-* 来固定你想要的宽度。您可以使用 col-xs-* 并且它适用于所有尺寸，而不是响应式：

EXAMPLE: http://bootply.com/102912

示例：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>

If you want radios, checkboxes, or other form elements on the same line without the use of column classes, the class for the form is .form-inline:

如果您想在同一行上显示单选框、复选框或其他表单元素而不使用列类，则表单的类是.form-inline：

http://bootply.com/102908

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>