抱歉标题不好,我会尽力解释得更好。所以基本上我在 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 中防止这种情况?
最佳答案
仅当屏幕宽度大于 (250/2)*12 = 1500px
时才会出现间隙。正确的?然后您需要将第二列扩展到屏幕的右边缘。有一种解决方案不好,将其与 Bootstrap 样式一起使用。您需要使用 min-width: 1500px
调整媒体的列宽:
@media screen and (min-width: 1500px)
div#calendar_container {
width: calc(100vw - 250px);
}
关于html - 最大宽度防止网格填满所有空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41199645/