Question

我正在使用一些使用btn-block类定义的列宽Bootstrap按钮。但是，默认情况下，它们内部的文本是居中的，我想左对齐，以便在我的表单中看起来更自然。有没有一个很好的Bootstrap解决方案，或者我是否必须使用CSS？

我得到了什么：

<a href="url" class="btn btn-default btn-block" role="button">Push Meh</a>

Answer 1

这可能是一种hacky方式，但达到了你想要的效果：

<a href="#" class="btn btn-default btn-block" role="button"><span class="pull-left">Push Meh</span>&nbsp;</a>

和Bootply Demo

Answer 2

对于使用Bootstrap 4.1的任何人，都有一个text-left类可以与btn-block一起使用：

<a href="#" class="btn btn-primary btn-block text-left">Push Meh</a>

Answer 3

另一种方法是通过flexbox。您可以使用justify-content属性，也不要忘记display：flex。否则，它将无法正常工作。（见下面的代码）

DT <- fread(
" product    date       salesamount
   a       2011-01          35
   b       2011-02          40
   c       2011-03          50
   d       2011-01          55
   b       2012-02          46
   a       2011-02          35
   d       2012-01          62
   c       2012-03          56
   c       2012-02          56
   a       2012-03          38
   b       2012-01          46
   e       2011-03          60
   a       2012-03          38
   e       2012-02          67
   d       2011-01          55")

您可以在此处了解详情：https://css-tricks.com/almanac/properties/f/flex-direction/

干杯！

Answer 4

您可以更轻松地在btn之前先使用text-left：

<a href="url" class="text-left btn btn-default btn-block" role="button">Push Meh</a>

Answer 5

另一种简单的方法是通过Bootstrap 4的text-left类实现

 <a href="button" class="btn btn-outline-success btn-block text-left">
      <span class="iconify" data-icon="bx:bx-edit-alt" data-inline="true"></span> Start a discussion  
    </a>

Bootstrap：在btn-block中左对齐文本

5 个答案: