Bootstrap 3：对带控件标签的单选按钮进行水平工作吗？

Question

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

感谢。

修改

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

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

Answer 1

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

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

完整表格

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>