我想要一个按钮占据整个栏宽，但是有困难…
<div class="span9 btn-block">
<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>
如何使按钮与列一样宽?
当前回答
Bootstrap / CSS
使用col-12, btn-block, w-100，形式控制或宽度:100%
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <button class="btn btn-success col-12"> class="col-12" </button> <button class="btn btn-primary w-100"> class="w-100" </button> <button class="btn btn-secondary btn-block"> class="btn-block" </button> <button class="btn btn-success form-control"> class="form-control" </button> <button class="btn btn-danger" style="width:100%"> style="width:100%" </button>
其他回答
在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 / CSS
使用col-12, btn-block, w-100，形式控制或宽度:100%
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <button class="btn btn-success col-12"> class="col-12" </button> <button class="btn btn-primary w-100"> class="w-100" </button> <button class="btn btn-secondary btn-block"> class="btn-block" </button> <button class="btn btn-success form-control"> class="form-control" </button> <button class="btn btn-danger" style="width:100%"> style="width:100%" </button>
use
<div class="btn-group btn-group-justified">
...
</div>
但它只适用于<a>元素而不是<button>元素。
见:http://getbootstrap.com/components/ btn-groups-justified
您应该将这些样式添加到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>
我还没有测试过这个，我不确定你想要什么，但我认为这将使你接近。
<div class="col-md-9">
<button class="btn btn-block btn-primary" type="button">Block level button</button>
</div>
在Bootstrap 3中，这应该是您所需要的全部内容。我相信btn-large覆盖了btn-block的宽度。
