Bootstrap vertikale Schaltflächengruppe mit Warnungen

Question

Ich versuche, eine vertikale Schaltflächengruppe mit Bootstrap (2) zu erstellen. Ich möchte die Tasten die gleiche Breite haben, und die Warnungen auf der rechten Seite. Ist es möglich? Das habe ich bis jetzt erreicht. 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

ja, ist es möglich. Fügen Sie Bootstrap-Klassen wie folgt hinzu. Wenn Sie nichts über Bootstrap-Grid-System wissen, gehen Sie durch ein Bootstrap-Tutorial und verstehen Sie das Grid-System.

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