Question

我正在尝试使用Bootstrap（2）创建一个垂直按钮组。我希望按钮宽度相同，警报向右。可能吗？这是我到目前为止所得到的。 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

是的，有可能。添加bootstrap类，如下所示。如果你不了解bootstrap网格系统，请通过一个bootstrap教程并理解网格系统。

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

具有警报的Bootstrap垂直按钮组

1 个答案: