jquery - Bootstrap radio 在 sm 或更大时水平，当 xs 时垂直

Question

来自BS docs对于样式复选框和 radio ，我希望我的 radio 在 sm 或更大时水平排列，而在 xs 时垂直排列。根据上面提供的 BS 链接，我没有看到执行此操作的好方法。 horiz 和 vert radio 的 html 非常不同，我可能不得不使用 jquery 来操作，但我不想这样做(将 div 更改为内联，更新标签类)。建议表示赞赏

Answer 1

如何用另一个 div 包裹复选框/ radio ？ ？

<div class="col-xs-12 col-sm-4">
  <label class="radio">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">1
  </label>
</div>
<div class="col-xs-12 col-sm-4">
  <label class="radio">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">2
  </label>
</div>
<div class="col-xs-12 col-sm-4">
  <label class="radio">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">3
  </label>
</div>

只要注意 col-sm-4 - 不知道你有多少 radio 。

根据以下评论更新。

你可以做到 this如果您真的想避免使用 js，但这样会复制内容，这通常不是一个好的做法。

<div class="visible-xs">
    <div class="radio">
        <label>
            <input type="radio" name="RadioXS-1" id="RadioXS-1" value="option1">xs-1
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="RadioXS-2" id="RadioXS-2" value="option2">xs-2 very long text here
        </label>
    </div>
    <div class="radio">
        <label class="radio">
            <input type="radio" name="RadioXS-3" id="RadioXS-3" value="option3">xs-3
        </label>
    </div>
</div>
<div class="hidden-xs col-md-12">
    <label class="radio-inline">
        <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">1
    </label>
    <label class="radio-inline">
        <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">2 very long text here
    </label>
    <label class="radio-inline">
        <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">3
    </label>
</div>