Bootstrap：左对齐按钮文本答案

【问题标题】：Bootstrap : align button text leftBootstrap：左对齐按钮文本
【发布时间】：2014-12-27 19:07:09
【问题描述】：

如何在引导按钮中将文本左对齐？我有多个带有不同长度文本的按钮，并且所有按钮都需要具有相同的宽度。我使用 col-xs-11 类实现了这一点。

下面的示例按钮代码：

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

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

【问题讨论】：

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

【解决方案1】：

只需添加text-left 类

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

【讨论】：

您使用的是哪个版本的 Bootstrap？这适用于 Bootstrap v3.1.1
您是否检查过您的自定义 CSS 没有覆盖它？
我已经在bootstrapdocs.com/v3.0.1/docs/css 中通过 Chrome DevTools 尝试了我的代码，它可以工作

【解决方案2】：

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

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

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

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

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

【讨论】：

正是我看到的问题。 +1 截图 :-)
!important 适用于 CSS 规则中的一个特定声明。它不适用于类。

【解决方案3】：

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

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

【讨论】：

我发现烧瓶和 Flask_Bootstrap-3.3.5.6 存在这个问题。这个答案为我解决了，所以+1谢谢。

【解决方案4】：

你可以直接应用 css 而不是使用额外的类。

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

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

【讨论】：

【解决方案5】：

只需将 !important 添加到您的按钮定义中，它就会强制使用。

【讨论】：

!important 适用于 CSS 规则中的一个特定声明。它不适用于类。

【解决方案6】：

我最近在搜索如何对齐 Bootstrap 5 中左侧的按钮文本时遇到了这个问题在使用 flex 时，使用 text-left 的解决方案在这种情况下不起作用，并且因为 flex在 Bootstrap 5 中无处不在，尽管分享以下示例可能会对某人有所帮助：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>

【讨论】：

【解决方案7】：

给按钮类“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>

【讨论】：