我想要一个按钮占据整个栏宽,但是有困难…
<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>
如何使按钮与列一样宽?
当前回答
引导v3和v4
在按钮/元素上使用btn-block类
引导v2
在按钮/元素上使用输入块级类
其他回答
在Bootstrap 5中,类btn-block不再工作。但是,您可以将类w-100添加到按钮中,使其与容器一样宽。
<link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css” rel=“stylesheet” /> <div class=“row”><div class=“ col-5 ”> <a class=“btn btn-outline-primary w-100 ” href=“# ”><span>Button 1</span></a> </div><div class=“col-5 ”> <a class=“ btn btn-primary w-100 weiss ” href=“# ”><span>Button 2</span></a> </div></div>
为什么不使用Bootstrap预定义的类输入块级别来完成这项工作呢?
<a href="#" class="btn input-block-level">Full-Width Button</a> <!-- BS2 -->
<a href="#" class="btn form-control">Full-Width Button</a> <!-- BS3 -->
<!-- And let's join both for BS# :) -->
<a href="#" class="btn input-block-level form-control">Full-Width Button</a>
在控制大小^部分了解更多信息。
引导v3和v4
在按钮/元素上使用btn-block类
引导v2
在按钮/元素上使用输入块级类
我本以为这是最具自助风格的做事方式:
<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>
我所做的只是将类col-xs-12添加到按钮。
我们可以使用块级全宽按钮 通过添加.btn-block创建块级按钮——那些跨越父节点的全宽度的按钮。 <button type="button" class="btn btn-primary btn-lg btn-block"> 方块等级按钮 < /按钮> <button type="button" class="btn btn-secondary btn-lg btn-block"> 方块等级按钮 < /按钮>