Question

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

在这种情况下，我有一个小部件，它需要2个引导列，但整个内容不适合内部。我必须将空格设置为＆＃39; nowrap＆＃39;，这会使内容溢出到下一列。

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

）。

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

openFB.login(
            function (response) {
                if (response.status === 'connected') {
                    console.log('Facebook login succeeded, got access token: ', response); 

                    openFB.api({
                        path: '/me',
                        success: function (data) {
                            console.log("My Data", data);
                            userData.name = data.name;
                            userData.picture = 'http://graph.facebook.com/' + data.id + '/picture?type=small';
                            localStorageService.set('user', userData);
                            $timeout(function() {
                                $state.go('app.home');
                            }, 0);
                        },
                        error: function(error) {
                            console.log("Error here:", error);
                        }
                    });
                } else {
                    console.log('Facebook login failed: ' + response);
                }
            }, { scope: 'email, public_profile' });

购物车按钮的CSS

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

JSFiddle上的一个示例，重现了这个问题 http://jsfiddle.net/scottx/mA6Za/438/

这个想法是允许用户将这些小部件添加到标题中，并确保所有小部件都按预期加载并防止它们“破坏”＃39;无论添加了什么小部件以及他们决定为每个小部件分配多少列。因此，在这种情况下，用户添加了小部件徽标＆＃39;取两个列，小部件＆＃39;搜索＆＃39;采取6列，小部件＆＃39;各种＆＃39;它包含登录按钮，收藏夹等，并且有两列，小部件＆＃39;购物车＆＃39;也取2列。我在这里遇到的问题是小部件的各种各样的问题。在较小的屏幕上太大而不能只适合2列。

可能我想要达到的目标是不可能的，如果我们占用的空间超过分配给列的空间，其他列将不得不失去空间，我猜浏览器并没有知道哪一个会。我认为这可以通过JS修复，但我想知道是否有人可能只有CSS的解决方案。

非常感谢你！

Answer 1

我会选择：

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

这个css会强制cols中的所有元素占用最大值。 100％宽度的父母

我不知道你想在那里实现什么，但我们可以用

来制作文本以阻止溢出容器

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

Update JSFiddle

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

1 个答案: