使用Twitter Bootstrap排列单选按钮答案

借助Twitter Bootstrap 3.3.7，我试图排列多个问题，其中包含内嵌单选按钮答案，并让所有问题的单选按钮排列起来，以便最终用户显示更好。使用Twitter Bootstrap排列单选按钮答案

如果这是在超小设备，我希望单选按钮位于下一行。

我遇到的麻烦是应用col-sm-6（或任何列大小）似乎不工作，因为我期望。 help-block没有完全转到下一行，它卡在单选按钮下。

我期待能够使用正确的Twitter Bootstrap表单语法。这是可能的形式语法，或者这是否需要使用自己的行/ cols？

问题的一个例子：的jsfiddle https://jsfiddle.net/y8j5f0of/

<div class="row"> 
    <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> 
     <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>

答案一字排开，但输出不正常流动。

如果我删除col-sm-6，符合市场预期但答案是不排队的一切流动。此外，这不允许单选按钮去他们自己的线额外的小设备。

的jsfiddle https://jsfiddle.net/nz36k74o/1/

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

输出

来源

2017-05-05 Kirk

<跨度类= “帮助块COL-SM-6”>添加COL-SM-6在这里。 – tech2017

如果我做'col-xs-12'，它会将帮助块包裹到下一行。看起来这是它可以用于我认为没问题的所有视图的唯一方式。如果你想回答下来，我会接受它 – Kirk

帮助块可以“内联块”而不是“块” – blecaf

帮助块确实应该在一个新行。如果它应该在其他内容的下面，那么它不是该行的一部分。这是Bootstrap网格系统的基础。一个基本问题块应该是这样的：

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

退房的fiddle（抱歉onlyhad时间做一个）

来源

2017-05-05 19:56:37 sn3ll

这里是一个解决方案，以正确对齐的问题。它增加了一些额外的html标签，但我相信它解决了你的问题。

这是更新的小提琴。 https://jsfiddle.net/nz36k74o/3/

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

来源

2017-05-05 19:56:54 mrdeleon

使用Twitter Bootstrap排列单选按钮答案

回答

相关问题