如何创建一个 3 列响应式设计，其中第 1 列是可选的，第 3 列具有最小宽度？

Question

我想创建一个类似于http://vandelaydesign.com/blog/blog-promotion/best-twitter-practices-for-improving-visibility/ 的 HTML 布局，其中最左侧的列仅在较大的屏幕尺寸上显示，而最右侧的列具有 345 像素的固定宽度。

使用 bootstrap 3，我尝试了以下方法。

<div class="container">
    <div class="row">  
        <!--left-->
        <div class="col-sm-3">  
        </div>
        <!--/left-->

        <!--center-->
        <div class="col-sm-6">
        </div>
        <!--/center-->

        <!--right-->
        <div class="col-sm-3">
        </div>
        <!--/right-->
    </div>
</div>
<!-- /.container -->

但它正在创建堆叠列。任何帮助都会很棒。

Answer 1

在我们获得广泛的 CSS flexbox 支持之前，我喜欢 display: table-cell 用于流畅的水平布局。看一下这个快速示例：http://jsfiddle.net/zn6z3/ 您将使用媒体查询将左列隐藏在一定宽度，而中间列将扩展以填充丢失的空间。

table-cell 的优点在于您可以在某些列上定义固定宽度，而在其他列上没有明确的宽度。未定义宽度的列将扩展以填满表格的空间。与基于浮动的布局相比，这是一个巨大的优势。

这是我的示例 HTML 和 CSS

<div id="page">
    <div class="col" id="left">Content</div>
    <div class="col" id="middle">Content</div>
    <div class="col" id="right">Content</div>
</div>


* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#page {
    display: table;
    width: 100%;
}
    #page .col {
        display: table-cell;
        vertical-align: top;
        padding: 20px;
    }
    #left {
        width: 150px;
        background: #777
    }
    #middle {
        width: auto;
        background: #aaa;
    }
    #right {
        width: 345px;
        background: #ccc;
    }