Bootstrap:左对齐按钮文本

时间:2014-10-31 12:46:18

标签: html css twitter-bootstrap twitter-bootstrap-3

如何在引导按钮内将文本对齐到左侧?我有多个按钮,文本长度不一,所有按钮都需要有相同的宽度。我使用课程col-xs-11实现了这一目标。

以下示例按钮代码:

<input type="button" value="Applicant/Subsidiary" id="mybutton" name="test" class="primary-btn col-xs-11">

除了bootstrap提供的内容之外,是否可以在不创建自定义样式的情况下实现此目的? 我使用的是Bootstrap v3.0.1

5 个答案:

答案 0 :(得分:23)

问题不在于如何将CSS文本对齐到左侧,原始帖子询问是否有适用于它的引导类名称。

.text-left有效,但问题是有一个比text-left强的.btn,我认为这是bootstrap需要考虑的事情。

查看此屏幕截图,我在Bootstrap的网站上使用Chrome检查进行了测试。 enter image description here

在我的Chrome中,我在演示按钮上添加了“text-left”,这就是结果。 因此,对它有重要意义!

.text-left {
  text-align: left !important;
}

答案 1 :(得分:12)

如果只有一个按钮

,则使用内联样式
style="text-align:left; padding-left:6px"

答案 2 :(得分:11)

只需添加text-left

<input type="button" value="Applicant/Subsidiary" id="mybutton" name="test" class="primary-btn col-xs-11 text-left">

答案 3 :(得分:9)

您可以按正常方式应用css,而不是使用其他类。

/*specific button*/    
#mybutton {
   text-align: left;
}

/*all input that have type button*/
input[type='button'] {
   text-align: left;
}

答案 4 :(得分:1)

只需在按钮定义中添加!important即可强行使用。