Question

我有两个这样的列布局：

<style>.less-padding{ padding: 0 5px; }</style>
<div class="container-fluid">
    <div class="row">
        <div class="less-padding col-xs-4">
            <div class="panel panel-default">
                  <div class="panel-heading">
                        <h3 class="panel-title">foo</h3>
                  </div>
                  <div class="panel-body">
                        Lorem ipsum dolor sit ...
                  </div>
            </div>
        </div>
        <div class="less-padding col-xs-8">
            <div class="panel panel-default">
                  <div class="panel-heading">
                        <h3 class="panel-title">bar</h3>
                  </div>
                  <div class="panel-body">
                        Lorem ipsum dolor sit ...
                  </div>
            </div>
        </div>
    </div>
</div>

现在，我希望当用户调整浏览器大小时，左列保持最小宽度250px，而使用剩余空间时，左列保持在最小宽度<div class="less-padding col-xs-4" style="min-width:250px">。所以我试过这样的事情：

{{1}}

它可以工作，但是由于Bootstrap的百分比列宽，我调整浏览器大小时右栏现在会在左下方中断。

有没有办法防止这种情况并使其使用剩余的空间？

JSFiddle

提前致谢。

Answer 1

您还可以使用媒体查询来定义第一列为250px的点并进行一些CSS更改。

例如，我就这样做了：

JSFIddle

Answer 2

没有办法使用Bootstrap＆＃34;开箱即用＆＃34;来实现这一点，但你可以使用CSS3的flexbox和Bootstrap ..

http://bootply.com/3fZNoWqbTu

两列布局，左列为最小宽度

2 个答案: