4

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

如何控制布局从桌面切换到移动布局的时间？1366*768分辨率 1024*768分辨率

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

4

3 回答 3

9

row-fluidand已从 BS 3中container-fluid弃用，所以现在您只需使用containerandrow

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

于 2013-08-02T15:48:50.040 回答
3

查看他们关于网格系统的文档（http://getbootstrap.com/css/），似乎他们在 <768、768-992、992-1200 和 >1200 像素处有断点，所以你现在正在下降进入“中型设备”类别。

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

@media (min-width: 992px) {

在第 1002 和 4595 行。

于 2013-08-02T15:49:51.073 回答
1

在您的 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;
  }
}
于 2013-08-02T15:45:54.923 回答