Html 在Bootstrap中，如何强制内容适合特定列？

在我正在进行的这个项目中，用户可以决定将哪些小部件（徽标、搜索、登录、购物车按钮）放置在此标题上，最多12列。他们可以决定每个小部件将占用多少列

在这个场景中，我有一个小部件，它有两个引导列，但是整个内容不能放在里面。 我必须将空白设置为“nowrap”，这会使内容溢出到下一列

我想知道是否可以在CSS中使用，以及在没有空间的情况下（将空白设置为“nowrap”）如何强制此列的内容扩展并适应其宽度。

下面是所用HTML的简化版本（这仍然会产生我试图解决的问题）

JSFIDLE上的一个示例再现了这个问题

这样做的目的是允许用户将这些小部件添加到标题中，并确保所有小部件都按预期加载，并防止它们“中断”，而不管添加了哪些小部件以及它们决定为每个小部件分配多少列。因此，在这个场景中，用户添加了小部件“logo”占据2列，小部件“search”占据6列，小部件“各种”包含登录按钮、收藏夹等占据2列，小部件“cart”也占据2列。我在这里面临的问题是，小屏幕上的小部件“各种各样”太大，无法仅容纳两列

可能我想达到的目的是不可能的，如果我们占用的空间比分配给某个列的空间多，其他列将不得不失去空间，我猜浏览器不知道哪一个将是。 我认为这可以用JS来解决，但我想知道是否有人可以用CSS来解决

非常感谢你

我同意：

div.row > div > * {
 max-width: 100%;
}

此css将强制cols中的所有元素使用父元素的最大100%宽度

我不知道你们到底想在那个里实现什么，但我们可以制作文本来阻止容器溢出

.text-nowrap {
  white-space:initial;
}

---

我同意Dan Vinnicombe的观点……如果看不到代码，很难说如何帮助您。作为一个每天使用Bootstrap的人，我会说，我相信您的解决方案不是技术性的，而是组合性的。你正在用你目前不允许的房间来交换。为了让你拥有你所需要的空间，有些东西需要改变。正如在现有的“答案”中所提到的，如果没有看到你现有的代码，我们将无能为力。我尝试了这一点，但没有成功，很抱歉Kejt。我在JSFIDLE上添加了一个示例，我们可以在其中看到它的发生。谢谢。我更新了@Kejt答案和

fiddle

链接，也请通过它。我的荣幸@Kejt

div.row > div > * {
 max-width: 100%;
}

.text-nowrap {
  white-space:initial;
}