Bootstrap: left align text in btn-block
我正在使用一些使用 btn-block 类定义的列宽引导按钮。但是，它们里面的文本默认居中，我想左对齐它，这样它在我的表单中看起来更自然。有没有好的 Bootstrap 解决方案，还是我必须使用 CSS？
我有什么：
- 类似讨论：stackoverflow.com/questions/26675063/...
-
哦，奇怪。我想知道为什么当我搜索它时没有出现。
-
此外，那里的 bootstrap 解决方案似乎不起作用(至少在 bootstrap 3.3.5 中)，而另一个解决方案与 CSS 混淆，我想在这种情况下避免使用 CSS。
这可能是一个有点hacky的方法，但达到了你想要的效果：
1
| <span class="pull-left">Push Meh</span> |
还有一个 Bootply 演示
- 相同没有 法术：<button class="btn btn-default btn-block" type="submit"><span class="pull-left">Push Meh</span></button>
-
@DejaVu 我使用了 ，因为他的例子是 标签，它与 <button> 的间距不同。试试我的例子，没有它，这有点可怕。很高兴你能成功。干杯!在这里看到：bootply.com/Xesh61eXF3
-
@TimLewis 根据文档，您可以 Use the button classes on an , <button>, or <input> element. 您的解决方案有效，我这边没有salt，只是评论。
-
@DejaVu 哈哈，是的，我知道，我没有被冒犯或任何其他事情，只是解释了为什么 类需要巫术：P
对于使用 Bootstrap 4.1 的任何人，有一个 text-left 类可以与 btn-block:
一起使用
-
Bootstrap 3.3.7 也有一个 'text-left' 类，但在这种情况下它不起作用，因为它没有 !important 规则(而它在 Bootstrap 4.1 中)并且在 'btn' 之前声明具有 text-align: center 规则的类。
-
@GiorgioTempesta 是的。你想为这个答案点赞吗？该问题没有指定任何特定版本，对于最新的引导程序，我认为它比接受的答案更好。
-
你是对的，这比公认的答案要好得多，我只是指出 Bootstrap 3 也有它，即使它在这种情况下没用。点赞当之无愧！
另一种简单的方法是通过 Bootstrap 4 的 text-left 类
1
| <span class="iconify" data-icon="bx:bx-edit-alt" data-inline="true"></span> Start a discussion |
您可以更轻松地在 btn 之前先使用 text-left，如下所示：
另一种方式是通过 flexbox。您可以使用 justify-content 属性并且不要忘记 display:flex 。否则，它将无法工作。 (见下面的代码)
1
2
3
| a.btn {
display: flex;
justify-content: flex-start; } |
您可以在这里了解更多信息：https://css-tricks.com/almanac/properties/f/flex-direction/
干杯！
-
如果您可以使用 CSS，那么简单的 text-align: left; 就可以使用。