在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>
当前回答
在Bootstrap版本4。有一些内置的类来定位文本。
对表头和数据文本进行居中:
<table>
<tr>
<th class="text-center">Text align center.</th>
</tr>
<tr>
<td class="text-center">Text align center.</td>
</tr>
</table>
您还可以使用这个类来定位任何文本。
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider</p>
欲知详情
其他回答
Bootstrap 2.3具有文本左、文本右和文本中心实用程序类,但它们不能在表格单元格中工作。直到Bootstrap 3.0发布(他们已经修复了这个问题),我能够进行切换,我已经将此添加到我的网站CSS中,在Bootstrap . CSS之后加载:
.text-right {
text-align: right !important;
}
.text-center {
text-align: center !important;
}
.text-left {
text-align: left !important;
}
现在,随着Bootstrap 3的发布,你可以使用text-center类进行中心对齐,text-left类进行左对齐,text-right类进行右对齐,text-justify类进行对齐。
Bootstrap是一个非常简单的前端框架,一旦你使用它。以及非常容易定制,以满足您的喜好。
.text-align类完全有效,比.price-label和.price-value更有用,后者已经没有任何用处了。
我建议100%使用自定义实用程序类
.text-right {
text-align: right;
}
我喜欢施魔法,但那取决于你,比如
span.pull-right {
float: none;
text-align: right;
}
使用text-align:center !重要。可能有其他的文本对齐css规则,所以!important是重要的。
表格 th, td { 颜色:黑色!重要; border-collapse:崩溃; 背景颜色:黄色! 边框:1px纯黑色; 填充:10 px; Text-align: center ! } <表> < tr > < th > 居中对齐文本 < / th > < / tr > < tr > <td>居中对齐文本</td> <td>居中对齐文本</td> < / tr > 表> < /
Bootstrap没有这样的类,但是这种类被认为是一个“实用工具”类,类似于“。@anton提到的“右拉”类。
如果你看看公用事业。很少你会看到Bootstrap中的实用类,原因是这种类通常是不受欢迎的,建议用于以下两种: A)原型和开发——这样你就可以快速地构建你的页面,然后删除右拉和左拉类,以便将浮动应用到更多的语义类或元素本身,或者 B,当它明显比语义上的解决方案更实际时。
在您的情况下,通过您的问题,看起来您希望在您的表中有某些文本对齐在右侧,但不是全部。从语义上讲,这样做会更好(除了默认的引导类.table之外,我只是在这里创建一些类):
<table class="table price-table">
<thead>
<th class="price-label">Total</th>
</thead>
<tbody>
<tr>
<td class="price-value">$1,000,000.00</td>
</tr>
</tbody>
</table>
只需将text-align: left或text-align: right声明应用到price-value类和price-label类(或任何适用于您的类)。
应用align-right作为一个类的问题是,如果你想重构你的表,你将不得不重做标记和样式。如果您使用语义类,则可以只重构CSS内容。另外,如果你花时间将一个类应用到一个元素上,最好尝试为这个类分配语义值,这样其他程序员(或者你三个月后)就可以更容易地浏览标记。
一种思考的方式是:当你提出“这个td是用来干什么的?”的问题时,你不会从“align-right”的答案中得到澄清。