将min-width设置为容器的正确方法是什么?

时间:2014-01-18 06:11:23

标签: css grid twitter-bootstrap-3 horizontal-scrolling

我的网站设计的最低分辨率为1200px(大型设备台式机在引导方面)。我希望屏幕分辨率较低的人有水平滚动。

我有以下模板:

<body>

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            //...menu
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div id="table-trips-list">
                    //...grid content
                </div>
            </div>

            <div class="col-lg-4">
                <div id="search-drivers">
                    //...filters
                </div>
            </div>
        </div>
    </div>

</body>

这样做的正确方法是什么?

1 个答案:

答案 0 :(得分:3)

定义包含块的最小宽度百分比。

或使用px表示,

 .container{
 min-width:1200px;         
 width: auto !important;   /* Firefox will set width as auto */
 width:1200px;             /* As IE ignores !important it will set width as 1000px; */
}

或看到这个堆栈溢出链接。它可能有用。

<强> StackOverFlow for all sizes of window

我在我的网站上使用过这样的内容,

   @media screen and (max-width:320px) { */Your styles*/}
   @media screen and (min-width:321px) and (max-width:639px) {}
   @media screen and (min-width:640px) and (max-width:959px) {}
   @media screen and (min-width:960px) and (max-width:1279px) {}
   @media screen and (min-width:1280px) and (max-width:1599px) {}
   @media screen and (min-width:1600px) {}
   @media screen and (min-width:1920px) {}