Показывать содержимое в ячейке таблицы начальной загрузки 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/