在Twitter的Bootstrap框架中是否有一组对齐文本的类?
例如,我有一些包含$ total的表格,我希望它们向右对齐……
<th class="align-right">Total</th>
and
<td class="align-right">$1,000,000.00</td>
在Twitter的Bootstrap框架中是否有一组对齐文本的类?
例如,我有一些包含$ total的表格,我希望它们向右对齐……
<th class="align-right">Total</th>
and
<td class="align-right">$1,000,000.00</td>
当前回答
下面几行代码运行正常。你可以指定类,如文本中心,左或右,文本将相应地对齐。
<p class="text-center">Day 1</p>
<p class="text-left">Day 2</p>
<p class="text-right">Day 3</p>
这里不需要创建任何外部类。这些是Bootstrap类,它们有自己的属性。
其他回答
如果在Bootstrap 4.5中使用text-sm-right似乎不工作,请考虑可能内容对于表来说太多了,并且表不是在容器的100%(例如col)
使桌子100%宽:
<table class="w-100">
下面几行代码运行正常。你可以指定类,如文本中心,左或右,文本将相应地对齐。
<p class="text-center">Day 1</p>
<p class="text-left">Day 2</p>
<p class="text-right">Day 3</p>
这里不需要创建任何外部类。这些是Bootstrap类,它们有自己的属性。
你可以使用下面的CSS:
.text-right {text-align: right} /* For right align */
.text-left {text-align: left} /* For left align */
.text-center {text-align: center} /* For center align */
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
只需添加一个“自定义”样式表,它在Bootstrap的样式表之后加载。所以类定义是重载的。
在这个样式表中声明对齐方式如下:
.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}
现在你可以使用td和th元素的“通用”对齐约定了。