Bootstrap表格没有新行

Question

<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

如何让这个金额在同一行显示？这个网站是自适应的，但由于文本中的空格，文本变成了两行。

- Stijn Hoste

---

你的table-responsive使用方式不正确！请参考 https://github.com/twbs/bootlint/wiki/E027。 - cvrebert

Answer 1

如果您想要将文本放在同一行，请使用CSS样式。

white-space:nowrap;

eg:

例如：

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

CSS 样式表中

 .nowrap {
        white-space:nowrap;
    }

Bootstrap实现方法

既然已经使用了Bootstrap，就不需要再定义类，可以直接使用text-nowrap类。

将其应用在标签中即可，如果无效，可以尝试将文本放在标签内，并将class属性赋值为text-nowrap。

例如：

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

或者

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

您也可以将其放在表格标签中，这样就不需要在每个元素中添加。

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

Bootstrap文档中有更多相关信息，请查看对齐类别下的文档。

Bootstrap 4文档请参见此处。

Bootstrap 5文档请参见此处。

- kiranvj

---

你是最好的！非常感谢！ - Stijn Hoste

@StijnHoste 很高兴知道它有所帮助。如果您认为如此，请接受答案。 - kiranvj

您可以将类定义添加到父div或table类中，以使所有文本都不换行，而不是每个单独的文本。 - sharpshadow

运行得非常好。我必须将其添加到每个td中，但没关系。谢谢 :) - Marty_in_a_Box

我直接将它添加到表类中，就像魔法一样运行良好。 - Todd Skelton

这仍然是BS4的一个可靠解决方案。 - klewis

Answer 2

Bootstrap 4.

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

<table class="table text-nowrap">

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

- Onimusha

Answer 3

使用 代替空格

- Barry

---

这将解决问题，但需要改变所呈现的数据。通过样式修复它可以让你呈现任意数据并保持一致性。 - Surreal Dreams