我想要一个按钮占据整个栏宽,但是有困难…

<div class="span9 btn-block">
    <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>

如何使按钮与列一样宽?


当前回答

我简单地用了这个:

<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</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的宽度。

您应该将这些样式添加到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-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</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>