Twitter bootstrap 如何制作填充栏的按钮?

Twitter bootstrap 如何制作填充栏的按钮?,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,我正在我的项目中使用bootstrap3 我有以下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" v

我正在我的项目中使用bootstrap3

我有以下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>

正如您在视图中看到的,我有两行按钮


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

第二组按钮上的类为按钮提供了样式。具体来说,
btn

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

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


详情请参阅

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

参见小提琴:


布滕1
布滕2号
布滕3

您应该考虑查看Bootstrap的<代码> GET系统。那会做你想做的。使用列按您希望的方式拆分按钮。我尝试过,但没有帮助。您好,请在代码中添加一些解释,因为这有助于理解您的代码。只使用代码的答案是不受欢迎的。@BhargavRao请继续往下投票,如果“按钮的输入类错误”不够清楚,您认为您可以更好地解释它,请继续编辑我的答案。添加一句话,说明您为什么要求OP在那里使用“btn btn primary col-xs-4”,以及它实际会做什么。再多排一行就可以了。
<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>