如何使用Bootstrap制作响应式边栏而不填满整个屏幕？

Question

我正在尝试使用bootstrap-side-navbar的代码并在this demo之上建立。这几乎是我需要的，但我希望它不会在桌面上占满整个屏幕。

的问题是，当我加入max-width到.container-fluid侧边栏的栏和内容的重叠，见截图：

请告诉我一个好，反应灵敏，这个解决方案？

Answer 1

更换容器，液体集装箱，并添加以下CSS

#content { 
    position: relative; 
    width: calc(100% - 120px); 
    float: right; 
} 

我计算宽度由css calc财产，但仍然必须编写媒体查询来处理不同的屏幕布局。