自動收音機水平當sm或更大，垂直時xs

Question

從BS docs風格複選框和收音機，我希望我的收音機水平排列時，sm或更大，垂直排列時，xs。基於上面提供的BS鏈接，我沒有看到這樣做的好方法。水平和垂直無線電的html是不同的，我可能不得不使用jquery來操縱，但不希望（更改div內聯，更新標籤類）。建議讚賞

Answer 1

/* 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"); 
 
     } 
 
    }); 
 
    }); 
 
});

/* 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; 
 
}

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

Answer 2

如何將複選框/收音機與另一個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 - 不知道你有多少收音機有。

更新基於下面的評論。

你可以做this如果你reeeeeally要避免使用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>