Html Bootstrap:左对齐按钮文本
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/26675063/
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
Bootstrap : align button text left
提问by Delon
How can I align text to the left within a bootstrap button? I have multiple buttons with text of varying length, and all the button need to have same width. I have achieved this using the class col-xs-11
.
如何在引导按钮内将文本左对齐?我有多个带有不同长度文本的按钮,并且所有按钮都需要具有相同的宽度。我已经使用 class 实现了这一点col-xs-11
。
Sample button code below:
示例按钮代码如下:
<input type="button" value="Applicant/Subsidiary" id="mybutton" name="test" class="primary-btn col-xs-11">
Is it possible to achieve this without creating a custom style, other than what is provided by bootstrap? I'm using Bootstrap v3.0.1
除了引导程序提供的样式之外,是否可以在不创建自定义样式的情况下实现这一点?我正在使用 Bootstrap v3.0.1
采纳答案by Sasa
just add text-left
class
只需添加text-left
类
<input type="button" value="Applicant/Subsidiary" id="mybutton" name="test" class="primary-btn col-xs-11 text-left">
回答by bard
The issue is not how to css text-align to the left, the original post was asking if there is a bootstrap class name(s) works for it.
问题不在于如何将 css 文本对齐到左侧,原来的帖子是询问是否有适用于它的引导程序类名。
The .text-left works, but the trouble is there is a .btn that is stronger than text-left, I think this is something bootstrap need to think about.
.text-left 有效,但问题是有一个 .btn 比 text-left 强,我认为这是引导程序需要考虑的事情。
Checkout this screenshot that I did a test with Chrome inspect on Bootstrap's site.
查看我在 Bootstrap 网站上使用 Chrome 检查进行测试的屏幕截图。
In my Chrome, I add "text-left" on the demo button, and this is the result. Therefore, have !important on it!
在我的 Chrome 中,我在演示按钮上添加了“text-left”,这就是结果。因此,有 !important!
.text-left {
text-align: left !important;
}
回答by konzo
Or use inline styling for if its just one single button
或者如果它只有一个按钮,则使用内联样式
style="text-align:left; padding-left:6px"
回答by Pau
You can just apply css the normal way instead of using additional classes.
您可以仅以正常方式应用 css 而不是使用其他类。
/*specific button*/
#mybutton {
text-align: left;
}
/*all input that have type button*/
input[type='button'] {
text-align: left;
}
回答by worsthorst
Just add !important to your button definition and it will force utilization.
只需将 !important 添加到您的按钮定义中,它就会强制使用。