html - 在大型显示器上的 bootstrap 4 表格的单元格中内联显示内容。

Question

使用 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 .

Answer 1

您可以在表格列上放置一个 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>

http://jsfiddle.net/qgv9e0jw/

或者，由于您已经在使用 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>

http://jsfiddle.net/ympe2g7w/