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＆amp; V4

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

Bootstrap v2

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

Answer 2

为什么不使用执行此工作的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>

在Control Sizing^部分了解详情。

Answer 3

我只是用这个：

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

使用

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

但它仅适用于＆lt; a＆gt;元素而不是＆lt; button＆gt;元件。

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

Answer 5

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

Bootstrap 4.1.3

<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">
             Full Width Button
         </button>
     </div>
</div>

Answer 7

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

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

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

Answer 8

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

Answer 9

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

Answer 10

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

这个问题是几年前提出的，使用较旧的版本很难解决...但是现在这个问题有了一个非常简单的答案。

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

Answer 12

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

按钮是否全宽？

12 个答案:

Bootstrap v3＆amp; V4

Bootstrap v2