html - 最大宽度防止网格填满所有空间

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 a 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);
    }