我想要一个按钮占据整个栏宽,但是有困难…
<div class="span9 btn-block">
<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>
如何使按钮与列一样宽?
我想要一个按钮占据整个栏宽,但是有困难…
<div class="span9 btn-block">
<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>
如何使按钮与列一样宽?
当前回答
您应该将这些样式添加到CSS表中
div .no-padding {
padding:0;
}
button .full-width{
width:100%;
//display:block; //only if you're having issues
}
然后更改将类添加到代码中
<div class="span9 btn-block no-padding">
<button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button>
</div>
我还没有测试过这个,我不确定你想要什么,但我认为这将使你接近。
其他回答
use
<div class="btn-group btn-group-justified">
...
</div>
但它只适用于<a>元素而不是<button>元素。
见:http://getbootstrap.com/components/ btn-groups-justified
2022年更新:
你有多种方法使按钮全宽。
你可以把w-100加到这门课上。 你可以在按钮上方的容器中添加d-grid和gap-2:
<div class="d-grid gap-2"> <!-- Here -->
<button class="btn btn-primary" type="button">Button</button>
</div>
如果有人注意到btn-block在bootstrap 5.1+中不再工作:
它在自举5.1(更新日志)中被删除:
中断实用程序的.btn-block。而不是使用.btn-block 在.btn上,用.d-grid和.gap-*实用程序来包装按钮 根据需要将它们分开。切换到响应类以获得更多信息 控制他们。阅读文档中的一些例子。
你现在可以通过添加类w-100来创建一个全宽度的按钮,就像作者在官方定价示例页面中所做的那样:
<button type="button" class="w-100 btn btn-lg btn-outline-primary">
Sign up for free
</button>
来源:https://getbootstrap.com/docs/5.1/examples/pricing/
如果你想做一个block按钮的堆栈,官方文档推荐如下:
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
来源:https://getbootstrap.com/docs/5.1/components/buttons/ block-buttons
我们可以使用块级全宽按钮 通过添加.btn-block创建块级按钮——那些跨越父节点的全宽度的按钮。 <button type="button" class="btn btn-primary btn-lg btn-block"> 方块等级按钮 < /按钮> <button type="button" class="btn btn-secondary btn-lg btn-block"> 方块等级按钮 < /按钮>
您应该将这些样式添加到CSS表中
div .no-padding {
padding:0;
}
button .full-width{
width:100%;
//display:block; //only if you're having issues
}
然后更改将类添加到代码中
<div class="span9 btn-block no-padding">
<button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button>
</div>
我还没有测试过这个,我不确定你想要什么,但我认为这将使你接近。