Html 引导程序5：第二列中的表跳到第一列下面

我有一个网格布局，在左栏中有一些导航丸设置为“col auto”，因为我希望这些导航丸只占用内容自然宽度的空间

在第二个表中，我想要一个带有水平滚动条的大表。我能够做到这一点，除了表格总是跳转到导航栏下面，我无法将它渲染到右侧

请参见随附的小提琴：

.....
.....

我想要实现的是将表呈现在导航丸的右侧，就像单击“JSON”丸时呈现textarea一样

---

您能提供帮助吗？

引导中的行是默认情况下允许包装的flex容器。如果要将列强制放到同一行上，则需要防止这种换行

将

flex nowrap

类应用于您的行：

<div class="row flex-nowrap">

---

进一步阅读：

这将使表格保持在导航栏的右侧，但也不会缩小表格，并溢出页面。“我还应该做点别的吗？”janhink啊，桌子的乐趣。Bootstrap使用“table responsive”类处理表的响应特性。将溢出隐藏在包含表的列上。我会更新答案以涵盖这一点。谢谢！实际上，我甚至不必使用.flex nowrap，只需使用.overflow hidden即可

<div class="row flex-nowrap">

<div class="col overflow-hidden"> <!-- tab content / table markup / etc -->