313

我想要一个按钮来占据列的整个宽度，但是遇到了困难......

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

如何使按钮与列一样宽？

4

14 回答 14

881

引导 v3 和 v4

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

引导程序 v2

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

于 2013-11-04T21:43:20.423 回答
41

为什么不使用input-block-level完成这项工作的 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>

在Control Sizing^部分了解更多信息。

于 2013-07-16T23:51:00.670 回答
30

我只是用这个：

<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>
于 2014-06-23T05:50:09.990 回答
28

引导程序/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>

于 2018-01-31T08:24:40.143 回答
12

利用

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

但它只适用于 <a> 元素而不是 <button> 元素。

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

于 2013-12-13T14:05:22.323 回答
10

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

我还没有测试过这个，我不是 100% 确定你想要什么，但我认为这会让你接近。

于 2012-08-21T19:14:18.097 回答
8

如果有些人注意到btn-block引导程序 5.1+ 不再工作：

btn-block在 bootstrap 5.1 ( changelog ) 中被删除：

打破实用程序的已删除 .btn 块。不要在 .btn 上使用 .btn-block，而是使用 .d-grid 和 .gap-* 实用程序来包装您的按钮，以便根据需要分隔它们。切换到响应式类以更好地控制它们。阅读文档以获取一些示例。

为 bootstrap 5.1+ 的示例制作一个块按钮，取自官方文档：

<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

我看到作者用来使按钮全宽的另一种方法是添加 class w-100，就像在他们的官方定价示例页面中一样：

https://getbootstrap.com/docs/5.1/examples/pricing/

<button type="button" class="w-100 btn btn-lg btn-outline-primary">
    Sign up for free
</button>
于 2021-08-29T15:09:56.397 回答
6

我原以为这将是最引导式的做事方式：

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

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

于 2014-04-03T13:26:46.320 回答
6

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

于 2021-02-26T15:16:40.020 回答
5 
<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。

于 2014-03-06T11:53:46.037 回答
1 

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

于 2021-05-11T09:35:23.493 回答
1

这个问题是几年前提出的，对于旧版本来说有点难以理解......但现在这个问题有一个非常简单的答案。

<div class="btn btn-outline-primary btn-block">Button text here</div>
于 2020-11-11T14:10:38.503 回答
0

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

于 2012-08-24T10:55:59.070 回答
0

  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>
于 2021-08-29T15:53:43.473 回答