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

我如何在一条线上拥有TD？这个网站是响应性的,但由于文本中的空格,文本变成两行.

Answer 1

如果要将文本放在同一行中,请使用CSS样式

white-space:nowrap;

例如:

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

在CSS样式表中

 .nowrap {
        white-space:nowrap;
    }

这样做的Bootstrap方式

既然你已经有了bootstrap,不需要类定义,你可以使用class text-nowrap

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

例如:

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

要么

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

有关详细信息,请参阅" 对齐类"下的" 引导文档"

这里是 Bootstrap 4文档