引导表没有新行答案

【问题标题】：Bootstrap table no new line引导表没有新行
【发布时间】：2014-12-10 21:17:12
【问题描述】：

<h3>Mijn biedingen</h3>
        <table class="table table-responsive">
        <thead>
        <tr>
            <th>nummerplaat</th>
            <th>Bod</th>
            <th>Status</th>
            <th>Datum bod</th>
            <th>Aankoopdatum</th>
        </tr>
        </thead>
        <tbody>
                    <tr>
            <td>THOMAS</td>
            <td>&euro;    90 000,00</td>
            <td>open</td>
            <td>15/10/2014</td>
            <td>
                                        Niet beschikbaar
                                </td>
        </tr>
                    </tbody>
    </table>

这是我的代码，这是结果：https://www.dropbox.com/s/6vkc2mpu7z4yqgq/Screenshot%202014-10-15%2019.28.09.png?dl=0

我怎样才能把钱放在一条线上？这个网站是响应式的，但是由于文本中的空格，文本变成了两行。

【问题讨论】：

您错误地使用了table-responsive！见github.com/twbs/bootlint/wiki/E027

标签： css twitter-bootstrap bootstrap-4 twitter-bootstrap-3

【解决方案1】：

如果你想让文本在同一行使用 CSS 样式

white-space:nowrap;

例如：

<span class="nowrap">Your text here</span>

在 CSS 样式表中

 .nowrap {
        white-space:nowrap;
    }

引导方式

由于你已经有了bootstrap，不需要类定义，你可以使用text-nowrap类

只需在您的 td 中尝试此操作，或者如果不起作用，请尝试在您的文本周围添加 span 并分配 class

例如：

<td class="text-nowrap"> Your text </td>

或

<td> <span class="text-nowrap">Your text </span></td>

你也可以把它放在table标签中，这样就不需要在每个元素中添加了

例如：<table class="text-nowrap"> .... </table>

在 Bootstrap documentation 中了解更多信息，请查看 对齐类

Bootstrap 4 文档here

Bootstrap 5 文档here

【讨论】：

你是最棒的！非常感谢！
您可以将类定义添加到父 div 或 table 类中，以不包装里面的所有文本，而不是每个文本。
工作就像一个魅力。我习惯将它添加到每个 td 中，但这很好。谢谢:)
我直接将它添加到了表类中，效果很好。
这仍然是 BS4 的可靠解决方案

【解决方案2】：

引导程序 4。

如果您不需要支持多个长文本，也可以应用于整个表格：

<table class="table text-nowrap">

https://jsfiddle.net/439dg2k0/1/

【讨论】：

【解决方案3】：

使用&nbsp; 代替空格

【讨论】：

这将解决问题，但需要更改显示的数据。用样式修复它可以让您呈现任意数据并一致地呈现它。