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

Question

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

在这种情况下，我有一个带有 2 个引导列的小部件，但整个内容无法放入其中。 我必须将空格设置为“nowrap”，这会使内容溢出到下一列。

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

下面是使用的 HTML 的简化版本（仍然会产生我正在尝试修复的问题）

<div class="container">
        <div class="row">
                <div class="col-md-2 col-sm-2 col-xs-2">
                        <a class="logo" href="#" style=""><img src="logo.png" alt="Logo"></a>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-6">
                        <input type="text" class="form-control" placeholder="Search All Categories">
                </div>
                <div class="col-md-2 col-sm-2 col-xs-2 text-nowrap">
                        <a><span>Hi, Sign In<br><strong>Your Account</strong></span></a>
                        <a><span>Quick Order</span> <i class="fa fa-bolt"></i></a>
                </div>
                <div class="col-md-2 col-sm-2 col-xs-2">
                        <div class="cart-btn">
                        </div>
                </div>
        </div>
</div>

购物车按钮的 CSS

.cart-btn {
        width: 120px;
        height: 40px;
        display: inline-block;
        background-color: #292c2e;
        margin-left: 10px;
}

JSFiddle 上重现此问题的示例 http://jsfiddle.net/scottx/mA6Za/438/

这个想法是允许用户将这些小部件添加到标题中，并确保所有小部件都将按预期加载并防止它们“破坏”，无论添加了哪些小部件以及他们决定为每个小部件分配多少列.因此，在这种情况下，用户添加了占 2 列的小部件“徽标”，占 6 列的小部件“搜索”，包含登录按钮、收藏夹等并占 2 列的小部件“各种”，以及小部件'cart' 也占 2 列。我在这里面临的问题是小屏幕上的“各种”小部件太大而无法仅容纳 2 列。

可能我想要实现的目标是不可能的，如果我们占用的空间比分配给一列的空间多，那么其他列将不得不失去空间，我猜浏览器不知道哪一个会是。 我认为这可以用 JS 解决，但我想知道是否有人可能只有 CSS 的解决方案。

非常感谢！

Answer 1

我会选择：

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

这个 css 将强制 cols 中的所有元素取最大值。父级的 100% 宽度

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

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

Update JSFiddle