max-width防止网格填满所有空间

Question

抱歉没有很好的标题，我会尝试更好地解释。所以基本上我用fluid-container以这种方式定义了两个专栏：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-2 hideable-sidebar" id="resource_container">

            <h4>Resource</h4>

            <div class="input-group">
                <input type="text"
                       placeholder="Search"
                       class="form-control" id="resource_filter" />
                <span class="input-group-btn">
                    <button class="clear btn btn-default" type="button"
                            title="Remove">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                    </span>
            </div>

            <div class="results"></div>

        </div>
        <div class="col-sm-10" id="calendar_container">
            <div id="calendar" class="well"></div>
        </div>
    </div>
</div>

所以最终的结果是：

无论如何，如果我设置为第一个div max-width: 250px => <div class="col-sm-2 hideable-sidebar" id="resource_container">

，则红色标志是边距

我得到了这个结果：

如何看到第二列没有使用所有可用空间，实际上通过红色标志可以看到可用的其他空间可以填充。

如何在boostrap中防止这种情况？

Answer 1

仅当屏幕宽度超过(250/2)*12 = 1500px时才会出现间隙。对？然后，您需要将第二列展开到屏幕的右边缘。通过使用bootstrap样式，有一个不好的解决方案。您需要使用min-width: 1500px调整媒体的列宽：

@media screen and (min-width: 1500px)
    div#calendar_container {
        width: calc(100vw - 250px);
    }