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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 02:58:52  来源:igfitidea点击:

Bootstrap : align button text left

htmlcsstwitter-bootstraptwitter-bootstrap-3

提问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-leftclass

只需添加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. enter image description here

查看我在 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 添加到您的按钮定义中,它就会强制使用。