Question

使用bootstrap 3来设计我的响应式网站，我无法在1366px v 786px的桌面宽度分辨率下使用布局。当布局减少到1024px时，它被认为是移动断点。

如何控制布局何时从桌面切换到移动布局？ 1366*768 resolution 1024*768 resolution

这是我的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>

Answer 1

从BS 3弃用row-fluid和container-fluid，现在您只需使用container和row

您可以使用新的“小”网格类（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>

演示：http://bootply.com/71450

如果您希望它永远不会堆叠，即使在最小的显示器上，也要使用微小的col-xs-*网格类。

Answer 2

查看有关网格系统（http://getbootstrap.com/css/）的文档，看起来它们的断点位于＆lt; 768,768-992,992-1200和> 1200像素，所以你现在正在下降进入'中型设备'类别。

您可以修改bootstrap.css文件以更改特定情况的断点。

@media (min-width: 992px) {

在第1002和4595行。

Answer 3

在main.css（或您放置的任何名称）中，执行以下代码：

@media(max-width:1024px) {
  body {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  #heading > .container {
    padding: 0 15px;
  }

  #main-content > .container {
    padding: 0 15px;
  }

  #footer > .container {
    padding: 0 15px;
  }
  #heading h1 {
    font-size: 50px;
    line-height: 55px;
  }
  #heading h4 {
    font-size: 20px;
    line-height: 25px;
  }
}

Bootstrap 3响应式桌面和移动布局

3 个答案: