Bootstrap 3

Question

Twitters Bootstrap Framework中是否有一组用于对齐文本的类？

E.g。我有一些$总计的表格，我希望与右边对齐...

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

和

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

Answer 1

Bootstrap 3

v3 Text Alignment Docs

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

v4 Text Alignment Docs

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

Answer 2

使用text-right使用Bootstrap 3.x可以很好地工作：

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

Answer 3

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

如果你看看utilities.less你会在Bootstrap中看到很少的实用程序类，原因是这种类通常不赞成，建议用于： a）原型设计和开发 - 这样你就可以快速构建你的页面，然后删除pull-right和pull-left类，支持将浮点数应用于更多的语义类或元素本身，或者 b）当它显然比更加语义的解决方案更实用时。

在您的情况下，根据您的问题，您希望表格中的某些文字对齐，但不是全部。在语义上，最好做一些事情（我只是在这里组成几个类，除了默认的bootstrap类，.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声明应用于价格 - 价值和价格 - 标签类（或任何适合您的类）。

将align-right作为一个类应用的问题是，如果要重构表，则必须重做标记和样式。如果你使用语义类，你可能只能重构css。另外，如果花时间将一个类应用于元素，最佳做法是尝试为该类分配语义值，以便标记更容易为其他程序员（或三个月后）导航。

想到这一点的一种方法是：当你提出问题“这是什么？”时，你不会从答案“对齐 - 右”中得到澄清。

Answer 4

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;
}

Answer 5

只需添加一个在Bootstrap样式表后加载的“自定义”样式表。所以类定义过载了。

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

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

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

Answer 6

我猜因为css已经有text-align:right AFAIK bootstrap没有特殊的类。

Bootstrap确实为右侧的浮动div等提供了“pull-right”。

<强>更新 bootstrap 2.3刚出来并添加了文本对齐样式

http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/

Answer 7

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

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

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

Answer 8

v3.3.5中的Bootstrap文本对齐。

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

CodePen Example

Answer 9

这些代码行正常运行。您可以指定文本中心，左侧或右侧等类，文本将相应对齐。

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

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

Answer 10

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

Answer 11

.text-align课程完全有效且比.price-label和.price-value更有用，而且不再有用。

我建议使用名为

的自定义实用程序类100％

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

我喜欢做一些魔术，但这取决于你，就像：

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

Answer 12

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

Bootstrap是一个非常简单的前端框架，一旦你使用它就可以使用它。除了根据自己的喜好进行定制之外，还可以进行定制。

Answer 13

扩展大卫的答案，我只是添加一个简单的类来增强Bootstrap，如下所示：

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

Answer 14

这是一个简短而又甜蜜的答案。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 15

我们有五个课程，你可以在这里参考： http://v4-alpha.getbootstrap.com/components/utilities/

＆＃13;

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

＆＃13;

Answer 16

这是最简单的解决方案

您可以指定文本中心，左侧或右侧等类。文本将相应地与这些类对齐。您不必单独创建类。这些类内置于BootStrap 3
中

router.get('/', function(req, res){
    var someUserRequest = request('http://google.com', function(error, resp, body){
        if (error){
        console.log(error);
        }
        console.log(resp.headers); //lets assume that there is 'x-content-type-options' that I don't want for example
    }
    req.pipe(someUserRequest).on('response', function(response){
    delete response.headers['x-content-type-options'];
    console.log(response.headers); // everything looks fine here - no 'x-content-type-options'
    }).pipe(res);
});
module.exports = router;

点击此处： Demo

Answer 17

引导程序 5

v5 text alignment docs

在 Bootstrap 版本 5 中，更改了文本对齐实用程序类。使用以下新类来对齐文本：

~~text-left~~ text-start 用于左对齐。
text-center 用于居中对齐。
~~text-right~~ text-end 用于右对齐。

这个类也可以在表格中使用。在单元格内右对齐文本

    <td class="text-end">$1,000.00</td>

如果要在整列中右对齐文本，可以使用 css nth-child 属性

/* || right aligns text of third column; change 3 to your desired column number*/
tr > th:nth-child(3),
tr > td:nth-child(3) {
    text-align: right;
}

参考下面的示例以获取完整的解决方案

/* to right align text within whole column */
.custom-table tr>th:nth-child(3),
.custom-table tr>td:nth-child(3) {
  text-align: right;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<body>
  <table class="table table-bordered custom-table">
    <thead>
      <tr>
        <th scope="col">Date</th>
        <th scope="col">Customer</th>
        <th scope="col">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>11 May 2021</td>
        <td>Paula Allen</td>
        <td>$104.98</td>
      </tr>
      <tr>
        <td>10 May 2021</td>
        <td class="text-end">Kevin(right-align)</td>
        <td>$233.00</td>
      </tr>
      <tr>
        <td>09 May 2021</td>
        <td>Joyes Murray</td>
        <td>$170.25</td>
      </tr>
    </tbody>
  </table>
</body>

Answer 18

使用text-align:center !important。可能还有其他text-align CSS规则，因此!important很重要。

table,
th,
td {
  color: black !important;
  border-collapse: collapse;
  background-color: yellow !important;
  border: 1px solid black;
  padding: 10px;
  text-align: center !important;
}

<table>
  <tr>
    <th>
      Center aligned text
    </th>
  </tr>
  <tr>
    <td>Center aligned text</td>
    <td>Center aligned text</td>
  </tr>
</table>

Answer 19

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

For more details

希望对您有帮助。

Answer 20

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

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

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

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

Answer 21

如果它在带有 text-sm-right 的 Bootstrap 4.5 中似乎不起作用，请考虑可能表格的内容太多并且表格不是容器的 100%（例如，col）

使表格 100% 宽：

 <table class="w-100">

Answer 22

在此三级引导无效类

中

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

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

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

Answer 23

如果您使用 Bootstrap 3.x

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

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

Boostrap 4 实用程序类在 Bootstrap 3.x 中熟悉。它的差异现在已经启用了断点。默认断点是：xs, sm, md, lg and xl,所以这些文本对齐类看起来像 .text- [breakpoint] - [alignnment]

Bootstrap - 内部表的Text-align类

23 个答案:

Bootstrap 3

Bootstrap 4

这是最简单的解决方案

引导程序 5