Question

我已经阅读了有关此主题的文档，并尝试了几种解决方案。我正在寻找一种方法来在按钮组中对齐3个引导按钮，其中前2个按钮仅占用其内容所需的宽度，而最后一个按钮占用其父容器的整个宽度。

Plunker：http://plnkr.co/edit/fxpcJE018kW1d72tK9Nn?p=preview

<div class="col-md-12">
  <div class="btn-group-justified">
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-move"></span>
    </button>
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-plus"></span>
    </button>
    <div class="btn btn-default btn-block">Expand this div button to full width</div>
  </div>
</div>

Answer 1

使用一点点jQuery很容易得到你想要的东西：

enter image description here

HTML：

<div id="my-row" class="col-md-12 row">
<button type="button" id="btn1" class="btn btn-default">
  <span class="glyphicon glyphicon-move"></span>
</button>
<button type="button" id="btn2" class="btn btn-default">
  <span class="glyphicon glyphicon-plus"></span>
</button>
<div class="btn btn-default stretch">Expand this div button to full width</div>

CSS：

#my-row{
    padding: 0px;
    margin: 0px;
}

jQuery的：

var width = $('#my-row').width()-($('#btn1').width() + $('#btn2').width()+60);

$( "div.stretch" ).css( "width", width);

$( window ).resize(function() {

    var width = $('#my-row').width()-($('#btn1').width() + $('#btn2').width()+60);

    $( "div.stretch" ).css( "width", width);
});

的jsfiddle：

JsFiddle

Answer 2

此解决方案可以提供解决方案

    <div class="row">
            <div class="col-md-12">
                    <div class="btn-group-justified"id="b">
                        <button type="button" class="btn btn-default"id="a">
                            <span class="glyphicon glyphicon-move"></span>
                        </button>
                        <button type="button" class="btn btn-default"id="aa" >
                            <span class="glyphicon glyphicon-plus"></span>
                        </button>
                        <div class="btn btn-default btn-block"id="aaa">Expand this div button to full width</div>
                    </div>
            </div>
        </div>
  </body>

<强> CSS

#aaa{
    width:100%;
    clear:right;
}
#a{
float:left;
}
#aa{
 float:left;
}

jsfiddle

如何对齐最后一个按钮为全宽的bootstrap 3按钮

2 个答案: