使按钮去全宽?

您应该将这些样式添加到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>

我还没有测试过这个，我不确定你想要什么，但我认为这将使你接近。

按钮的宽度由按钮文本定义。如果你想定义按钮的宽度，你可以使用css中的像素来定义宽度，如果你想通过响应使用百分比值。

为什么不使用Bootstrap预定义类input-block-level来完成这项工作呢?

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

在控制大小^部分了解更多信息。

Bootstrap v3 &v4

在按钮/元素上使用btn-block类

引导v2

在按钮/元素上使用input-block-level类

使用

<div class="btn-group btn-group-justified">
...
</div>

但它只适用于<a>元素和not <button>元素。

看:http://getbootstrap.com/components/#btn-groups-justified

<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的宽度。

我本以为这是最具自助风格的做事方式:

<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>

我所做的只是将类col-xs-12添加到按钮。

我简单地用了这个:

<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>

Bootstrap / CSS

使用col-12， btn-block， w-100， form-control或width: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>

这个问题几年前就提出来了，老版本有点难…但现在这个问题的答案很简单。

<div class="btn btn-outline-primary btn-block">Button text here</div>

在引导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>

如果有人注意到btn-block在bootstrap 5.1+中不再工作:

它在引导5.1 (更新日志)中被删除:

Breaking drop .btn-block for utilities。而不是使用.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

1. 我们可以使用块级全宽按钮

2. 通过添加.btn-block创建块级按钮——那些跨越父元素的全宽度的按钮。

   <button type="button" class="btn btn-primary btn-lg btn-block">
   Block level button
   </button>
   
   
   <button type="button" class="btn btn-secondary btn-lg btn-block">
   Block level button
   </button>
   

在引导5中使用w-100以全宽度显示按钮。

 <input id="form-button" class="btn btn-success w-100" type="submit" value="Continue">

在Bootstrap 5中，btn-block不再工作。使用col-12或w-100代替

<button type="button" class="btn col-12">Full Width Button</button>


<button type="button" class="btn w-100">Full Width Button</button>

2022年更新:

你有多种方法使按钮全宽。

1. 可以将w-100添加到类中。
2. 你可以在按钮上方的容器中添加d-grid和__abc1:

<div class="d-grid gap-2"> <!-- Here -->
<button class="btn btn-primary" type="button">Button</button>
</div>