Bootstrap：左对齐按钮文本

Question

如何在引导按钮内将文本左对齐？我有多个带有不同长度文本的按钮，并且所有按钮都需要具有相同的宽度。我已经使用类

col-xs-11

实现了这一点。

下面的示例按钮代码：

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

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

Answer 1

只需添加

text-left

类

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

Answer 2

问题不在于如何将 css 文本向左对齐，原来的帖子是询问是否有一个引导类名适用于它。

.text-left 可以工作，但问题是有一个 .btn 比 text-left 更强，我认为这是 bootstrap 需要考虑的事情。

查看我在 Bootstrap 网站上使用 Chrome 检查进行测试的屏幕截图。

在我的 Chrome 中，我在演示按钮上添加了“text-left”，这就是结果。 因此，有！重要！

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

Answer 3

如果只有一个按钮，则使用内联样式

style="text-align:left; padding-left:6px"

Answer 4

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

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

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

Answer 5

我最近在搜索如何对齐 Bootstrap 5 中留下的按钮文本时遇到了这个问题 在使用 flex 时，使用

text-left

的解决方案在这种情况下不起作用，并且由于

flex

在 Bootstrap 5 中无处不在，我想分享以下示例可能会对某人有所帮助：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />


<div class="d-flex">
  <div class="btn btn-outline-secondary text-start flex-grow-1">wide text</div>
  <div class="btn btn-outline-info">text</div>
</div>

Answer 6

给按钮类“text-start”：

<button type="button" class="btn btn-primary btn-lg btn-block alert-primary col-12 text-start">
   <i class="fab fa-apple"></i>
   Lorem ipsum
</button>

Answer 7

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

Answer 8

我无法向吟游诗人的答案添加评论，但他的解决方案现在是 Bootstrap 5 的默认行为（现在将 text-left 更改为 text-start 以支持 RTL）：