Twitter Bootstrap 响应式布局：侧边栏的固定大小？答案

【问题标题】：Twitter Bootstrap Respsonsive Layout: fixed size for sidebar?Twitter Bootstrap 响应式布局：侧边栏的固定大小？
【发布时间】：2012-10-23 17:09:27
【问题描述】：

我有一个带有左侧边栏的响应式 Twitter 引导布局。当我更改屏幕分辨率时，侧边栏和内容区域会更改它们的大小。

是否可以让侧边栏（.span3 类）保持固定宽度，而内容区域（.span9 类）改变大小？

【问题讨论】：

如果您需要修复布局元素，那么您应该考虑不使用 .span 类，这些类已经过调整以响应屏幕宽度的变化。您可能需要使用响应式 CSS 实现自己的一组类以保持在布局网格中。
这是一个处理这个问题的教程：ekdhl.net/blog/2012/10/19/…

标签： twitter-bootstrap responsive-design

【解决方案1】：

创建一个仅在该特定区域覆盖 .span3 的新规则，然后添加到样式表的末尾。所以——像这样：

.sidebar .span3 { 宽度：200px！重要； }

【讨论】：

【解决方案2】：

在侧边栏使用 flex 布局而不是使用引导网格，并在 flex div 中使用引导网格。

以下是 HTML 结构和 CSS 规则。

.flex-layout {
    display: flex;
    min-height: calc(100vh - 60px);
}

.flex-col1 {
    width: 270px;
    display: inline-block;
}

.flex-col2 {
    flex: 2;
}

.col {
    display: inline-block;
    vertical-align: top;
}


<div class="flex-layout">
    <div class="col flex-col1">
        //here will be nav
    </div>
    <div class="col flex-col2">
        //here will be bootstrap grid
    </div>
</div>

【讨论】：