I have a sort of a menu bar, which consists of radio buttons (in a button group) that I designed as buttons using bootstrap. Now I would like to make it responsive, so that they would collapse into a dropdown button, when the window would be narrow enough. I couldn't find anything alike in the bootstrap documentation, so I have no idea how to achieve this - any suggestions would be appreciated.
This is my code:
<div class="row col-md-12">
<div style="clear: both; display: inline;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-info btn-sm active" style="width: 300px;"><input type="radio" value="0" class="check" name="options" id="option1" autocomplete="off" checked>1</label>
<label class="btn btn-info btn-sm" style="width: 300px;"><input type="radio" value="1" class="check" name="options" id="option2" autocomplete="off">2</label>
<label class="btn btn-info btn-sm" style="width: 300px;"><input type="radio" value="2" class="check" name="options" id="option3" autocomplete="off">3</label>
</div>
</div>
</div>
<div class="row col-md-12">
<div style="clear: both; display: inline;">
<div class="btn-group" data-toggle="collapse">
<div class="dropdown-button-container">
<label class="btn btn-info btn-sm active" style="width: 300px;"><input autocomplete="off" checked class="check" id="option1" name="options" type="radio" value="0">1</label> <label class="btn btn-info btn-sm" style="width: 300px;"><input autocomplete="off" class="check" id="option2" name="options" type="radio" value="1">2</label> <label class="btn btn-info btn-sm" style="width: 300px;"><input autocomplete="off" class="check" id="option3" name="options" type="radio" value="2">3</label>
</div>
</div>
</div>
</div>
Javascript
$(window).on("load, resize", function () {
var viewportWidth = $(window).width();
if (viewportWidth < 768) {
$(".dropdown-button-container").addClass("collapse");
} else {
$(".dropdown-button-container").removeClass("collapse");
});
That's about as specific as I can get with the info provided.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.