如何使單選按鈕組合攏？

我有一種菜單欄，它包含單選按鈕（在一個按鈕組中），我使用bootstrap將其設計爲按鈕。現在我想讓它響應，以便當窗口足夠窄時它們會摺疊成下拉按鈕。我在bootstrap文檔中找不到任何相似的東西，所以我不知道如何實現這一點 - 任何建議，將不勝感激。如何使單選按鈕組合攏？

這是我的代碼：

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

來源

2016-08-30 patriciasmith

在CSS中使用'@media screen'並更改div的寬度和高度，如果是你想要的 –

我也想將按鈕（標籤）排列到下拉菜單中，我是否也可以通過' @media screen'？ – patriciasmith

試試這個我認爲它的工作你http://www.eyecon.ro/bootstrap-tabdrop/ –

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

這是我們所特定的，我可以用提供的信息獲取。

來源

2017-06-21 23:22:23 Afrophysics

如何使單選按鈕組合攏？

回答

相關問題