如何使按钮填充列？

Question

我在项目中使用 bootstrap 3 。

我有这个HTML代码：

<div class="btn-group btn-group-justified">
    <input type="button" name="name" value="butten 1" />
    <input type="button" name="name" value="butten 2" />
    <input type="button" name="name" value="butten 3" />
</div>

<div class="btn-group btn-group-justified">
    <a class="btn btn-primary">butten 1</a>
    <a  class="btn btn-primary">butten 2</a>
    <a class="btn btn-primary">butten 3</a>
</div>

这里看起来如何：

正如您所见，我有两排按钮。

我的问题是为什么上部按钮行的宽度没有填充父行的所有宽度作为第二个按钮行？

Answer 1

第二组按钮上的类为按钮提供样式。具体而言，btn。

Answer 2

您没有将样式按钮的引导类附加到第一组中的<button>元素，因此它们使用默认的浏览器样式。你应该像这样添加类：

<div class="btn-group btn-group-justified">
    <input type="button" class="btn btn-primary" name="name" value="butten 1" />
    <input type="button" class="btn btn-primary" name="name" value="butten 2" />
    <input type="button" class="btn btn-primary" name="name" value="butten 3" />
</div>

<div class="btn-group btn-group-justified">
    <a class="btn btn-primary">butten 1</a>
    <a class="btn btn-primary">butten 2</a>
    <a class="btn btn-primary">butten 3</a>
</div>

有关详细信息，请参阅the docs here。

Answer 3

您使用了错误的按钮输入类。

请参阅小提琴：https://jsfiddle.net/oa9wj80x/7/

<div class="col-xs-12">
    <input type="button" class="btn btn-primary col-xs-4" name="name" value="butten 1" /> 
    <input type="button" class="btn btn-primary col-xs-4" name="name" value="butten 2" />
    <input type="button" class="btn btn-primary col-xs-4" name="name" value="butten 3" />
</div>
<div class="col-xs-12">
<div class="btn-group btn-group-justified">
    <a class="btn btn-primary">butten 1</a>
    <a  class="btn btn-primary">butten 2</a>
    <a class="btn btn-primary">butten 3</a>
</div>
</div>