使按钮全角显示？

276

我希望按钮能占据列的整个宽度，但是有困难...

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

如何使按钮与列一样宽？

— 用户1438003
source

2

什么列？CSS在哪里？

— JJJ

所以我正在使用Twitter-bootstrap

— user1438003 2012年

1

你试过了style="width:100%"吗？还是将其放在您的班级之一中？

— 李·泰勒

2

那可能是因为它有一些边距或列有一些填充。

— 奥哈德

4

该btn-block课程对我有效，正如您在BS3中所期望的那样

— fguillen 2013年

826

Bootstrap v3和v4

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

Bootstrap v2

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

— 莱克
source

13

对于按钮组，您还需要添加btn-block到btn-group包装器中。

— 杰西2015年

1

经过Bootstrap V3测试和“ btn-block”为我工作

— Buddhika Alwis

我使用的是相同的按钮，但没有展开<div class =“ btn-group”> <button id =“ btnSearch” class =“ btn-block”>搜索</ button> </ div>

— Samra

队友的欢呼声！这一定是答案

— Nicholas

39

为什么不使用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>

在“ 控件大小调整”部分中了解更多信息。

— CodeAngry
source

2

@fguillen 不再使用BS，而是尝试form-control上课。它似乎使样品中的物体宽100％。

— CodeAngry

@CodeAngry只是很好奇，为什么您不再使用BS（可能会激怒代码；）？

— K. Kilian Lindberg

2

@CarlLindberg我自己滚了！BS适合快速周转，但是...并不突出。

— CodeAngry 2013年

1

@CodeAngry，这很酷，您可以滚动自己的框架-但使用主题滚动器可能值得-无论哪种方式，在自己的东西上做道具！

— 科迪2015年

从bs4开始，@ Layke的答案似乎是最新的，涵盖了bs 2、3和4。上述两个选项对bs4都没有任何帮助。对此表示歉意，但已接受的答案似乎不是一个好主意，并且此方法似乎已被弃用。

— JL Peyret

26

我只是用这个：

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

— 同步
source

1

这是使用btn-lg的方法。表单控制无效。

— Mark Swardstrom 2014年

14

Bootstrap 4.1+

使用col-12，btn-block，w-100或form-control

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

展开摘要

— 华西
source

12

用

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

但它仅适用于<a>元素，不适用于<button>元素。

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

— 诺埃尔
source

1

问题是关于按钮而不是按钮，Layke提出了btn-group关于btn-block课堂的更广泛接受的回答。

— 汉斯

9

您应该将这些样式添加到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％是否想要您想要的东西，但是我认为这会让您接近。

— 肯尼·巴尼亚（Kenny Bania）
source

我更正了我的代码中的错字，应该是div而不是顶部css条目中的span。您可以确认正在应用样式吗？按钮的宽度是否会改变？

— 肯尼·巴尼亚

6

btn-block是拯救我的属性！正在拉扯我的头发。。现在我回去搜索twitter.github.io/bootstrap/base-css.html#buttons，该属性在那里记录-doh;）

— GONeale

6

我本以为这将是最引导式的工作方式：

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

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

— 斯塔克斯
source

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。

— kim3er
source

1

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

— 斯科普
source