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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 23:45:12  来源:igfitidea点击:

How to set width of a button bootstrap

htmlcsstwitter-bootstrap

提问by OunknownO

How to set custom width of a bootstrap button.

如何设置引导按钮的自定义宽度。

enter image description here

在此处输入图片说明

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

参考这个链接

http://www.w3schools.com/bootstrap/bootstrap_buttons.asp

http://www.w3schools.com/bootstrap/bootstrap_buttons.asp

回答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 是中等引导按钮的标准顶部和底部填充。您必须对大按钮和小按钮进行相应调整。