Question

从BS docs用于样式复选框和收音机，我想让我的收音机在sm或更大时水平排列，并在xs时垂直排列。根据上面提供的BS链接，我没有看到一个很好的方法。 horiz和vert无线电的html足够不同，我可能不得不使用jquery进行操作，但不希望（将div更改为内联，更新标签类）。建议赞赏

Answer 1

如何用其他div包装复选框/收音机？

<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 - 不知道你有多少收音机。

根据以下评论更新。

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

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

Answer 2

＆＃13;

/* Latest compiled and minified JavaScript included as External Resource */
$(document).ready(function() {
  $("#horizVertChange").on("click", function() {
    $(".radios-hv > div").each(function() {
      if ($(this).hasClass("radio")) {
        $(this).removeClass("radio");
        $(this).css("display", "inline");
      } else {
        $(this).addClass("radio");
        $(this).css("display", "block");
      }
    });
    $(".radios-hv label").each(function() {
      if ($(this).hasClass("radio-inline")) {
        $(this).removeClass("radio-inline");
      } else {
        $(this).addClass("radio-inline");
      }
    });
  });
});

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
  margin: 10px;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <button id="horizVertChange">Toggle btw horiz and vert</button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 radios-hv">
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="checked" />Option one</label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" />Option two</label>
      </div>
      <div class="radio disabled">
        <label>
          <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" />Option three</label>
      </div>
    </div>
  </div>
</div>

＆＃13;

当sm或更大时，自举无线电水平，当xs时垂直

2 个答案: