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

Question

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

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3

4

使用Bootstrap 3设计响应式网站时，在1366像素 x 768像素的桌面分辨率以下的布局存在问题。将布局减少到1024像素时，它被视为移动端断点。

如何控制布局从桌面切换到移动端布局？

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

- Mohamed Nagy

也许你正在谈论媒体查询？ - BrOSs

3个回答

3

查看他们关于网格系统的文档(http://getbootstrap.com/css/)，似乎在<768、768-992、992-1200和>1200像素处设置了断点，因此您现在属于“中等设备”类别。

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

@media (min-width: 992px) {

在1002和4595行。

- beercodebeer

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;
  }
}

- BrOSs

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zim · Accepted Answer

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

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