Html 使按钮变成全角？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12061139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making button go full-width?
提问by user1438003
I want a button to take up the full width of the column, but having difficulties...
我想要一个按钮来占据列的整个宽度，但是有困难......
<div class="span9 btn-block">
<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>
How do I make the button as wide as the column?
如何使按钮与列一样宽？
回答by Layke
Bootstrap v3 & v4
引导程序 v3 和 v4
Use btn-blockclass on your button/element
btn-block在按钮/元素上使用类
Bootstrap v2
引导程序 v2
Use input-block-levelclass on your button/element
input-block-level在按钮/元素上使用类
回答by CodeAngry
Why not use the Bootstrap predefined class input-block-levelthat does the job?
为什么不使用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>
Learn more here in the Control Sizing^section.
在此处的控件大小调整 ^部分了解更多信息。
回答by syn
I simply used this:
我只是用这个：
<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>
回答by WasiF
Bootstrap 4.1+
引导程序 4.1+
use col-12, btn-block, w-100or form-control
使用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>回答by noel
use
用
<div class="btn-group btn-group-justified">
...
</div>
but it only works for <a> elements and not <button> elements.
但它只适用于 <a> 元素而不适用于 <button> 元素。
see: http://getbootstrap.com/components/#btn-groups-justified
请参阅：http: //getbootstrap.com/components/#btn-groups-justified
回答by Kenny Bania
You should add these styles to a CSS sheet
您应该将这些样式添加到 CSS 表中
div .no-padding {
padding:0;
}
button .full-width{
width:100%;
//display:block; //only if you're having issues
}
Then change add the classes to your code
然后更改将类添加到您的代码中
<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>
I haven't tested this and I'm not 100% sure what you want, but I think this will get you close.
我还没有测试过这个，我不能 100% 确定你想要什么，但我认为这会让你接近。
回答by Starkers
I would have thought this would be the most bootstrap-esque way of doing things:
我会认为这将是最引导式的做事方式：
<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>
All I'm doing is adding the class col-xs-12to the button.
我所做的就是将类添加col-xs-12到按钮中。
回答by kim3er
<div class="col-md-9">
<button class="btn btn-block btn-primary" type="button">Block level button</button>
</div>
In Bootstrap 3, this should be all you need. I believe btn-largewas overriding the width of btn-block.
在 Bootstrap 3 中，这应该就是你所需要的。我相信btn-large是覆盖的宽度btn-block。
回答by skoepp
The width of the button is defined by the button text. So if you want to define the width of the button you can use a defined width by using pixel in the css or if you want to by responsive use a percentage value.
按钮的宽度由按钮文本定义。因此，如果您想定义按钮的宽度，您可以通过在 css 中使用像素来使用定义的宽度，或者如果您想通过响应使用百分比值。
