表格内部的文本对齐类

HTML CSS

Tony小卤蛋

2020-03-16

Twitter的Bootstrap框架中是否有一组对齐文本的类？

例如，我有一些$总计要向右对齐的表格...

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

和

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

第1816篇《表格内部的文本对齐类》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共19个回答

逆天Tony 2020.03.16

这三个类中的Bootstrap无效类

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

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

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

MandySam伽罗 2020.03.16

在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>

更多细节

希望对您有帮助。

GO西里 2020.03.16

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>

在视口大小为MD（中）或更宽的视口上左对齐文本。

在大小为LG（大）或更宽的视口上左对齐文本。

大小为XL（超大）或更大的视口上的左对齐文本。

JinJin卡卡西 2020.03.16

这是最简单的解决方案

您可以分配类，例如text-center，left或right。文本将相应地与这些类对齐。您不必单独进行课程。这些类内置在BootStrap 3中

    <h1 class="text-center"> Heading 1 </h1> 
    <h1 class="text-left"> Heading 2 </h1> 
    <h1 class="text-right"> Heading 3 </h1>

检查这里：演示

Green西里 2020.03.16

为此，我们有五个类，您可以从这里参考：http : //v4-alpha.getbootstrap.com/components/utilities/

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

小胖GO 2020.03.16

这是一个简短而甜蜜的答案，并带有示例。

table{
    width: 100%;
}
table td, table th {
    border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <table>
    <tr>
      <th class="text-left">Text align left.</th>
      <th class="text-center">Text align center.</th>
      <th class="text-right">Text align right.</th>
    </tr>
    <tr>
      <td class="text-left">Text align left.</td>
      <td class="text-center">Text align center.</td>
      <td class="text-right">Text align right.</td>
    </tr>
  </table>
</body>

西里老丝古一 2020.03.16

噢，随着Bootstrap 3的发布，您可以使用的类text-center进行中心对齐，text-left 左对齐，text-right右对齐和text-justify合理对齐。

一旦使用Bootstrap，Bootstrap是一个非常简单的前端框架。以及非常易于定制以适合您的喜好。

古一小胖 2020.03.16

扩展David的答案，我只是添加了一个简单的类来扩展Bootstrap，如下所示：

.money, .number {
    text-align: right !important;
}

樱乐 2020.03.16

的.text-align类是完全有效的，比具有更多可用的.price-label和.price-value它们是没有用的任何更多。

我建议100％使用一个名为

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

我喜欢做一些魔术，但这取决于您，例如：

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

仲羽蛋蛋 2020.03.16

您可以在下面使用此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 */

神奇神乐GO 2020.03.16

以下代码行正常工作。您可以分配类，例如text-center，left或right，文本将相应对齐。

<p class="text-center">Day 1</p> 
<p class="text-left">Day 2</p> 
<p class="text-right">Day 3</p>

在这里，不需要创建任何外部类。这些是Bootstrap类，并且具有自己的属性。

卡卡西逆天十三 2020.03.16

Bootstrap 4来了！在Bootstrap 3.x中熟悉的实用程序类现在已启用断点。默认的断点：xs，sm，md，lg和xl，因此这些文本对齐类看起来像.text-[breakpoint]-[alignnment]。

<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>

重要提示：撰写本文时，Bootstrap 4仅在Alpha 2中使用。这些类及其使用方式如有更改，恕不另行通知。

NearPro 2020.03.16

在v3.3.5中引导文本对齐：

 <p class="text-left">Left</p>
 <p class="text-center">Center</p>
 <p class="text-right">Right</p>

CodePen示例

Stafan西门逆天 2020.03.16

我猜是因为CSS已经有了text-align:right，AFAIK，Bootstrap没有一个特殊的类。

Bootstrap的右侧确实具有用于浮动div等的“向右拉”功能。

Bootstrap 2.3刚问世，并添加了文本对齐样式：

Bootstrap 2.3发布（2013-02-07）

小卤蛋村村 2020.03.16

只需添加一个“自定义”样式表，该样式表将在Bootstrap的样式表之后加载。因此，类定义被重载。

在此样式表中，声明对齐方式如下：

.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}

现在，您可以对td和th元素使用“通用”对齐约定。

泡芙伽罗小卤蛋 2020.03.16

不，Bootstrap没有为此提供的类，但是这种类被视为“实用程序”类，类似于@anton提到的“ .pull-right”类。

如果您看utilities.less，在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: leftor text-align: right声明应用于price-value和price-label类（或任何适合您的类）。

align-right用作类的问题是，如果要重构表，则必须重做标记和样式。如果使用语义类，则可能仅重构CSS内容就可以摆脱困境。另外，如果花时间将类应用于元素，则最佳实践是尝试为该类分配语义值，以便标记易于其他程序员（或三个月后）浏览。

一种思考的方式是：当您提出问题“此td是做什么用的？”时，您将无法从“ align-right”答案中得到澄清。

JinJinTom 2020.03.16

Bootstrap 2.3具有实用程序类text-left，text-right和text-center，但它们在表单元格中不起作用。在发布Bootstrap 3.0之前（他们已解决了该问题），并且我能够进行切换，我将其添加到了在以下位置加载的CSS bootstrap.css：

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

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

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

Pro路易 2020.03.16

使用Bootstrap 3.x text-right可以完美地工作：

<td class="text-right">
  text aligned
</td>

梅神奇 2020.03.16

引导程序3

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>

引导程序4

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>

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android