按钮是否全宽？

Question

我想要一个按钮占据列的整个宽度,但有困难......

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

如何使按钮与列一样宽？

Answer 1

Bootstrap v3和v4

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

Bootstrap v2

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

Answer 2

如果有人注意到btn-blockBootstrap 5.1+ 中不再工作：

它在 bootstrap 5.1（变更日志）中被删除：

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

现在，您可以通过添加 class 来制作全角按钮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/

如果你想制作一堆块按钮，官方文档推荐如下：

<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

Answer 3

为什么不使用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 ^部分中了解更多信息.

Answer 4

我只是用这个:

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

Answer 5

使用

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

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

请参阅:http://getbootstrap.com/components/#btn-groups-justified

Answer 6

引导-4

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-success col-12">
             class="col-12"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-primary w-100">
             class="w-100"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-secondary btn-block">
             class="btn-block"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-success form-control">
             class="form-control"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-danger" style="width:100%">
             style="width:100%"
         </button>
     </div>
</div>

Answer 7

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

Answer 8

您应该将这些样式添加到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%肯定你想要的,但我认为这会让你接近.

Answer 9

我原本以为这将是最具引导性的做事方式:

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

我正在做的就是将该类添加col-xs-12到按钮中.

Answer 10

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