表格内部的文本对齐类

本文翻译自:Text-align class for inside a table

Is there a set of classes in Twitter's Bootstrap framework that aligns text? Twitter的Bootstrap框架中是否有一组对齐文本的类?

For example, I have some tables with $ totals that I want aligned to the right... 例如,我有一些总计为$表,我想右对齐...

<th class="align-right">Total</th>

and

<td class="align-right">$1,000,000.00</td>

#1楼

参考:https://stackoom.com/question/rpZA/表格内部的文本对齐类


#2楼

I guess because CSS already has text-align:right , AFAIK, Bootstrap doesn't have a special class for it. 我猜是因为CSS已经有text-align:right ,AFAIK,Bootstrap没有特殊的类了。

Bootstrap does have "pull-right" for floating divs, etc. to the right. Bootstrap的右侧确实具有用于浮动div等的“向右拉”功能。

Bootstrap 2.3 just came out and added text alignment styles: Bootstrap 2.3刚发布并添加了文本对齐样式:

Bootstrap 2.3 released (2013-02-07) Bootstrap 2.3发布 (2013-02-07)


#3楼

No, Bootstrap doesn't have a class for that, but this kind of class is considered a "utility" class, similar to the ".pull-right" class that @anton mentioned. 不,Bootstrap没有为此提供的类,但是这种类被视为“实用程序”类,类似于@anton提到的“ .pull-right”类。

If you look at utilities.less you will see very few utility classes in Bootstrap, the reason being that this kind of class is generally frowned upon, and is recommended to be used for either: a) prototyping and development - so you can quickly build out your pages, then remove the pull-right and pull-left classes in favor of applying floats to more semantic classes or to the elements themselves, or b) when it's clearly more practical than a more semantic solution. 如果您看utilities.less,那么在Bootstrap中将看到很少的实用程序类,原因是这种类通常不被接受,建议用于以下任何一种:a)原型设计和开发-这样您就可以快速构建移出页面,然后删除右上角和左上角类,以便将浮点数应用于更多语义类或元素本身,或者b)当它显然比更具语义性的解决方案更实用时。

In your case, by your question it looks like you wish to have certain text align on the right in your table, but not all of it. 就您的情况而言,根据您的问题,您似乎希望表格中的某些文本对齐,但并非全部对齐。 Semantically, it would be better to do something like (I'm just going to make up a few classes here, except for the default bootstrap class, .table): 从语义上讲,最好做类似的事情(我将在这里组成一些类,除了默认的引导类.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>

And just apply the text-align: left or text-align: right declarations to the price-value and price-label classes (or whatever classes work for you). 只需将text-align: lefttext-align: right声明应用于price-value和price-label类(或任何适合您的类)即可。

The problem with applying align-right as a class, is that if you want to refactor your tables you will have to redo the markup and the styles. align-right用作类的问题是,如果要重构表,则必须重做标记和样式。 If you use semantic classes you might be able to get away with refactoring only the CSS content. 如果使用语义类,则可能仅重构CSS内容就可以摆脱困境。 Plus, if are taking the time to apply a class to an element, it's best practice to try to assign semantic value to that class so that the markup is easier to navigate for other programmers (or you three months later). 另外,如果花时间将类应用于元素,则最佳实践是尝试为该类分配语义值,以便标记易于其他程序员(或三个月后)浏览。

One way to think of it is this: when you pose the question "What is this td for?", you will not get clarification from the answer "align-right". 一种思考的方式是:当您提出问题“此td是做什么用的?”时,您将不会从“ align-right”答案中得到澄清。


#4楼

The .text-align class is totally valid and more usable than having a .price-label and .price-value which are of no use any more. .text-align类是完全有效的,并且比具有.price-label有用的.price-label.price-value更加有用。

I recommend going 100% with a custom utility class called 我建议100%使用一个名为

.text-right {
  text-align: right;
}

I like to do some magic, but that is up to you, like something: 我喜欢做一些魔术,但这取决于您,例如:

span.pull-right {
  float: none;
  text-align: right;
}

#5楼

Bootstrap 3 引导程序3

v3 Text Alignment Docs v3文字对齐文件

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Bootstrap 3文本对齐示例

Bootstrap 4 引导程序4

v4 Text Alignment Docs v4文字对齐文件

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-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 4文本对齐示例


#6楼

Bootstrap 2.3 has utility classes text-left , text-right , and text-center , but they do not work in table cells. Bootstrap 2.3具有实用程序类text-lefttext-righttext-center ,但它们在表单元格中不起作用。 Until Bootstrap 3.0 is released (where they have fixed the issue) and I am able to make the switch, I have added this to my site CSS that is loaded after bootstrap.css : 在发布Bootstrap 3.0之前(他们已经解决了该问题),并且能够进行切换,我将其添加到了bootstrap.css之后加载的站点CSS中:

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

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

.text-left
{
    text-align: left !important;
}
发布了0 篇原创文章 · 获赞 8 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/asdfgh0077/article/details/105472649
今日推荐