使用Bootstrap 4,我有一个带有两列的表。在最后一列(右侧)中,我想在大屏幕上彼此并排显示一些按钮。我无法正常工作。我尝试将td
元素的类设置为d-inline
,以使内容以内联方式显示,但它不起作用。我还尝试创建一个div
并将其css设置为内联显示,但同样无法正常工作。如何解决此问题,使单元格的所有内容在大屏幕上内联显示?
我的HTML
<div class="container">
<table class="table">
<tr>
<td>
some long text here, well at least long enough to show the effect of the buttons next being next to each other anymore, even on a large display.
</td>
<td>
something else here
</td>
<td>
<button class="btn btn-sm">
some button
</button>
<button class="btn btn-sm">
some button
</button>
<button class="btn btn-sm">
some button
</button>
</td>
</tr>
</table>
</div>
或作为JSFiddle。
答案 0 :(得分:2)
您可以在表格列上放置style="white-space:nowrap"
样式,这应强制不要将内容包装在单元格内。
<div class="container">
<table class="table">
<tr>
<td>
some long text here, well at least long enough to show the effect of the buttons next being next to each other anymore, even on a large display.
</td>
<td>
something else here
</td>
<td style="white-space:nowrap">
<button class="btn btn-sm">
some button
</button>
<button class="btn btn-sm">
some button
</button>
<button class="btn btn-sm">
some button
</button>
</td>
</tr>
</table>
</div>
或者,由于您已经在使用Bootstrap,因此也可以使用其提供的text-nowrap
类,该类基本上与上述操作相同。
<div class="container">
<table class="table">
<tr>
<td>
some long text here, well at least long enough to show the effect of the buttons next being next to each other anymore, even on a large display.
</td>
<td>
something else here
</td>
<td class="text-nowrap">
<button class="btn btn-sm">
some button
</button>
<button class="btn btn-sm">
some button
</button>
<button class="btn btn-sm">
some button
</button>
</td>
</tr>
</table>
</div>