使用bootstrap 3来设计我的响应式网站,我无法在1366px v 786px的桌面宽度分辨率下使用布局.当布局减少到1024px时,它被认为是移动断点.
如何控制布局从桌面切换到移动布局？
这是我的HTML
- <body>
- <div class="container-fluid">
- <div class="container-fluid header">
- <div id="container">
- </div>
- </div>
- <div class="row-fluid">
- <div class="col-lg-3">
- <div class="well">
- </div>
- </div>
- <div class="col-lg-9">
- <div class="col-lg-6">
- <div class="title">
- <h3>title 1</h3>
- </div>
- </div>
- <div class="col-lg-6">
- <div class="title">
- <h3>title 2</h3>
- </div>
- </div>
- </div>
- </div>
- </div>
解决方法
从BS 3不推荐使用排液和容器液,所以现在只需使用容器和排
您可以使用新的“小”网格类(col-sm- *)来防止布局在较小的显示屏上堆叠.
- <div class="container">
- <div class="row">
- <div class="col-lg-3 col-sm-3">
- <div class="well">
- </div>
- </div>
- <div class="col-lg-9 col-sm-9">
- <div class="col-lg-6 col-sm-6">
- <div class="well">
- </div>
- </div>
- <div class="col-lg-6 col-sm-6">
- <div class="well">
- </div>
- </div>
- </div>
- </div>
- </div>
如果您希望它永远不会堆叠,即使在最小的显示器上,也可以使用微小的col-xs- *网格类.
