Bootstrap 4堆棧收音機btn-group

所以我有一個btn組的單選按鈕，我想堆棧響應。除非當我刪除btn-group，但當然單選按鈕不知道哪些被檢查並停止工作，我根本無法讓它工作。Bootstrap 4堆棧收音機btn-group

<div class="container"> 
    <div class="row"> 
     <div class="btn-group" role="group" data-toggle="buttons"> 
      <div class="col-lg-4"> 
       <label class="btn btn-primary active"><input hidden="true" type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1</label> 
      </div> 
      <div class="col-lg-4"> 
       <label class="btn btn-primary"><input hidden="true" type="radio" name="options" id="option2" autocomplete="off"> Radio 2</label> 
      </div> 
      <div class="col-lg-4"> 
       <label class="btn btn-primary"><input hidden="true" type="radio" name="options" id="option3" autocomplete="off"> Radio 3</label> 
      </div> 
     </div> 
    </div> 
</div>

來源

2017-02-10 N. Wasserkampf

所以，你想究竟是什麼？在選中的單選按鈕上選中的單選按鈕或活動類的值？ –

@AbhishekKumbhani我需要活動類 –

@ n-wasserkampf其實bootstrap會自動添加一個活動類。這裏是[演示鏈接]（http://codepen.io/anon/pen/YNRyPJ）。確保你已經正確添加了bootstrap.css，bootstrap.js和jquery.js文件。 –

你可以簡單地實現通過添加此腳本：

$("input[type=radio]").on("change",function(){ 
    $('input:checked').parent().addClass("active"); // Change active with your own class name 
});

來源

2017-02-10 10:48:47

謝謝！我修改了一下，以滿足我的需求，非常感謝！ –

@ n-wasserkampf謝謝你。 :) –

Bootstrap 4堆棧收音機btn-group

回答

相關問題