Bootstrap dikey düğme grubu uyarılar

Question

Bootstrap (2) kullanarak dikey düğme grubu oluşturmaya çalışıyorum. Düğmeleri aynı genişlikte ve sağdaki uyarıları istiyorum. Mümkün mü? Şimdiye kadar aldığım bu. http://jsfiddle.net/tnrx53ss/

<div style="margin-bottom: 10px;"> 
      <div id="myButtons" class="btn-group-vertical" data-toggle="buttons-radio"> 
       <input class="newSurveyInput" type="hidden" id="Size" name="Size" value="Liten" /> 
       <button type="button" onclick="$('input#Size').val(($(this).html()))" class="btn btn-default active">First</button><div class="alert alert-info" role="alert">Alert text regarding First.</div> 
       <button type="button" onclick="$('input#Size').val(($(this).html()))" class="btn btn-default">Second</button><div class="alert alert-info" role="alert">Some other text about Second.</div> 
       <button type="button" onclick="$('input#Size').val(($(this).html()))" class="btn btn-default">Third</button><div class="alert alert-info" role="alert">Third option explained</div> 
      </div> 
     </div> 

Answer 1

evet, bu mümkündür. Aşağıdaki gibi bootstrap sınıfları ekleyin. Eğer bootstrap grid sistemi hakkında bir bilgi sahibi değilseniz, bir bootstrap eğiticiden geçebilir ve grid sistemini anlayabilirsiniz.

<div class = "container" style="margin-bottom: 10px;"> 
    <div id="myButtons" class="btn-group-vertical row" data-toggle="buttons-radio"> 
     <input class="newSurveyInput col-md-12" type="hidden" id="Size" name="Size" value="Liten" /> 
     <div class = "col-md-12 col-sm-12"> 
     <button type="button" onclick="$('input#Size').val(($(this).html()))" class="btn btn-default active col-md-6 col-sm-6">First</button> 
     <div class="alert alert-info col-md-6 col-sm-6" role="alert">Alert text regarding First.</div> 
     </div> 
     <div class = "col-md-12 col-sm-12"> 
     <button type="button" onclick="$('input#Size').val(($(this).html()))" class="btn btn-default col-md-6 col-sm-6">Second</button> 
     <div class="alert alert-info col-md-6 col-sm-6" role="alert">Some other text about Second.</div> 
     </div> 
     <div class = "col-md-12 col-sm-12"> 
     <button type="button" onclick="$('input#Size').val(($(this).html()))" class="btn btn-default col-md-6 col-sm-6">Third</button> 
     <div class="alert alert-info col-md-6 col-sm-6" role="alert">Third option explained</div> 
     </div> 
    </div> 
</div>