Html 使用Twitter引导排列单选按钮答案

使用Twitter Bootstrap 3.3.7，我尝试将多个问题排列成一行，这些问题都有内嵌的单选按钮答案，并且所有问题的单选按钮都排列成一行，以便更好地显示给最终用户

如果这是一个额外的小设备，我希望单选按钮是在下一行

我遇到的问题是，应用

col-sm-6

（或任何列大小）似乎不像我预期的那样有效。

帮助块

没有完全转到下一行，它卡在单选按钮下面

我希望能够使用正确的Twitter引导表单语法。这在表单语法中是可能的，还是需要使用它们自己的行/列

一个问题示例：JSFiddle

输出

---

帮助块实际上应该位于新行中。如果它应该在其他内容的下面，那么它就不是行的一部分。这是引导网格系统的基础。基本问题块应如下所示：

<div class="form-group">
    <div class="row">
      <label class="col-sm-6">This is an example question 1 that is longer than question 2</label>
      <div class="col-sm-6">
         <label class="radio-inline">
             <input type="radio" name="answer1" value="Yes"> Yes
         </label>
         <label class="radio-inline">
             <input type="radio" name="answer1" value="No"> No
         </label>
      </div>
  </div>
  <div class="row">
      <div class="col-md-12">
          <span class="help-block">This is an example help block that has a lot of text that should start under the question instead of the answer.</span> 
      </div>            
  </div>
</div>

这是一个比问题2长的示例问题1
对
不
这是一个示例帮助块，其中有许多文本应该从问题而不是答案下开始。

---

查看（抱歉，只有时间做一个）

这里有一个解决方案可以正确地对齐问题。它添加了一些额外的html标记，但我相信它解决了您的问题

这是最新的小提琴。

这是一个示例问题
对
不
这是一个示例帮助块。

在此处添加col-sm-6。如果我添加了

col-xs-12

它将帮助块环绕到下一行。这似乎是唯一的方法，它将工作的所有意见，我认为是好的。如果你想写下答案，我接受。帮助块可以是“inline block”而不是“block”吗

<div class="row">
    <div class="form-group">
        <label>This is an example question 1 that is longer than question 2</label>
        <label class="radio-inline">
            <input type="radio" name="answer1" value="Yes"> Yes
        </label>
        <label class="radio-inline">
            <input type="radio" name="answer1" value="No"> No
        </label>
        <span class="help-block">This is an example help block that has a lot of text that should start under the question instead of the answer.</span>
    </div>
</div>

<div class="form-group">
    <div class="row">
      <label class="col-sm-6">This is an example question 1 that is longer than question 2</label>
      <div class="col-sm-6">
         <label class="radio-inline">
             <input type="radio" name="answer1" value="Yes"> Yes
         </label>
         <label class="radio-inline">
             <input type="radio" name="answer1" value="No"> No
         </label>
      </div>
  </div>
  <div class="row">
      <div class="col-md-12">
          <span class="help-block">This is an example help block that has a lot of text that should start under the question instead of the answer.</span> 
      </div>            
  </div>
</div>

<div class="form-group">
  <label class="col-sm-6">This is an example question</label>

  <div class="col-sm-6">
    <label class="radio-inline">
      <input type="radio" name="answer1" value="Yes"> Yes
    </label>

    <label class="radio-inline">
      <input type="radio" name="answer1" value="No"> No
    </label>
   </div>
</div>
<div class="row">
  <div class="col-sm-6">
    <span class="help-block">This is an example help block.</span>
  </div>
</div>