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

时间:2018-11-10 15:20:16

标签: html css bootstrap-4

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

1 个答案:

答案 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>

HTML::Mason

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