twitter-bootstrap 如何设置按钮引导程序的宽度
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/36015019/
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
How to set width of a button bootstrap
提问by OunknownO
How to set custom width of a bootstrap button.
如何设置引导按钮的自定义宽度。
My problem is that I don't know how to shrink width of button to like on the image (it's a submit button). Left part is input text. My problem is button is too wide. Here is the code:
我的问题是我不知道如何缩小按钮的宽度以喜欢图像(这是一个提交按钮)。左侧部分是输入文本。我的问题是按钮太宽了。这是代码:
<div class="col-xs-5 col-xs-offset-3">
<div class="input-group input-group-lg">
<input type="text" class="form-control input-lg input-forme" id="Text" placeholder="Text">
<span class="input-group-btn tipka">
<button type="submit" class="btn btn-group-small" id="form-submit">Submit</button>
</span>
</div>
</div>
回答by Nvan
You can change width and padding : https://jsfiddle.net/wz8ac5d4/
您可以更改宽度和填充:https: //jsfiddle.net/wz8ac5d4/
.btn {
width:0px;
padding:5px;
}
Also you can add a class to your btn, it is a better practice.
您也可以在 btn 中添加一个类,这是一种更好的做法。
HTML:
HTML:
<button type="submit" class="btn btn-group-small my-small-btn" id="form-submit">Submit</button>
CSS :
CSS :
.my-small-btn {
width:0px;
padding:5px;
}
回答by Karan Trivedi
The classes that define the different sizes are:
定义不同大小的类是:
.btn-lg .btn-md .btn-sm .btn-xs
.btn-lg .btn-md .btn-sm .btn-xs
refer this link
参考这个链接
回答by Balvant Ahir
You can increase its size with this:
您可以通过以下方式增加其大小:
.btn {
width: 100%;
padding: 5px;
}
回答by Clinton Dobbs
I used max-width with padding.
我使用了带填充的最大宽度。
HTML
HTML
<button type="submit" class="btn custom-btn" id="form-submit">Submit</button>
CSS
CSS
.custom-btn {
max-width: 100%;
padding-left:25px;
padding-right:25px;
}
You can also just shortcut the padding.
您也可以只使用填充的快捷方式。
.custom-btn {
max-width: 100%;
padding: 6px 25px;
}
Just adjust the 25px to whatever length you want to get the appropriate size.
只需将 25px 调整到您想要获得适当大小的任何长度即可。
Please note that 6px is the standard top and bottom padding for a medium bootstrap button. You will have to adjust accordingly for large and small buttons.
请注意,6px 是中等引导按钮的标准顶部和底部填充。您必须对大按钮和小按钮进行相应调整。


