Question

我正在尝试为平板电脑浏览器设计桌面浏览器和其他布局的布局。

我想在桌面浏览器中看到3 + 9列（侧边栏为3列，内容为9列），平板电脑中有12列（仅限内容）。我不需要平板电脑的侧边栏，所以我需要在这种情况下显示流体内容（宽度100％）

我编写了这段代码，它可以与桌面浏览器一起使用，但是当我在平板电脑浏览器中测试它时，我只看到9列。

任何人都可以帮助我吗？

由于

...
    <div class="row-fluid">
       <div class="span3 visible-desktop">
          <!-- Render Sidebar -->
       </div>
       <div class="span9">
          <!-- Render Content-->
       </div>
    </div>
...

Answer 1

在你的CSS结束时尝试这样的事情：

@media (max-width: 979px){
  .span9 {width: 100% !important;}

}

您可能希望在该范围内添加其他类，例如“内容”，并将规则更改为定位'.content'verus'.span9'

Answer 2

Here is an example以及live demo这样做而不向您的html文档添加Bootstrap标记。

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Sass Bootstrap - Fluid Grid - demo 1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="demo.css" rel="stylesheet">
</head>
<body>
    <div id="page">
        <div id="page-body" class="hero-unit">
            <article>
                <header><h1>Article Title</h1></header>
                <section class="main">
                    <header><h2>Section Title</h2></header>
                    Laborum eveniet cupiditate qui placeat adipisci dolor itaque porro corporis, quae expedita quis sint quas eveniet voluptatum velit, magnam alias totam architecto possimus porro? Dolores ex tempora ipsam earum architecto hic vel, rem ducimus praesentium fugit quisquam veniam, esse itaque quos eligendi aut labore tempora. Quidem magni soluta. Odit reiciendis repellat laudantium corrupti totam provident, eveniet cumque similique voluptatum obcaecati fugit perspiciatis vero in, animi facere neque ipsam iure sequi quo minus illum magni aliquam odio, nemo officiis eius aut dolor consequuntur blanditiis adipisci perferendis non nostrum?
Delectus rem atque possimus vel voluptate, hic ipsa ea eligendi inventore suscipit, inventore architecto consectetur officia illum aperiam labore totam dicta. Fugiat ut consequuntur sunt minima, ducimus excepturi iure et sed voluptas hic minima corporis, accusantium architecto quo laudantium blanditiis ullam voluptas in laborum sit? Est magni sapiente iusto quia vitae, vitae molestiae iste? Tempore expedita maiores.
Corporis nulla inventore tenetur tempore?
Nesciunt itaque nam ipsum voluptate quos impedit facere id. Saepe quibusdam maiores optio id natus ut quas pariatur.
Quas tenetur tempore mollitia eius provident quidem ea quam ut et, corporis beatae iure error eligendi possimus maiores ipsum numquam, enim fuga cumque blanditiis eius id excepturi ut quia iusto hic quisquam, commodi incidunt pariatur. Aliquid consequatur nostrum maiores veniam magnam tenetur aperiam quis, dignissimos in tenetur explicabo ea ratione provident corrupti necessitatibus eveniet iure autem, ullam possimus ea natus ipsam.
Minus unde totam aliquid natus quis, eos ullam autem pariatur ducimus quibusdam iste, cum ab quasi iusto ut culpa quam illum hic laboriosam
                </section>
                <section>
                    <section>
                    <header><h2>Section Title</h2></header>
                    Laborum eveniet cupiditate qui placeat adipisci dolor itaque porro corporis, quae expedita quis sint quas eveniet voluptatum velit, magnam alias totam architecto possimus porro? Dolores ex tempora ipsam earum architecto hic vel, rem ducimus praesentium fugit quisquam veniam, esse itaque quos eligendi aut labore tempora. Quidem magni soluta. Odit reiciendis repellat laudantium corrupti totam provident, eveniet cumque similique voluptatum obcaecati fugit perspiciatis vero in, animi facere neque ipsam iure sequi quo minus illum magni aliquam odio, nemo officiis eius aut dolor consequuntur blanditiis adipisci perferendis non nostrum?
Delectus rem atque possimus vel voluptate, hic ipsa ea eligendi inventore suscipit, inventore architecto consectetur officia illum aperiam labore totam dicta. Fugiat ut consequuntur sunt minima, ducimus excepturi iure et sed voluptas hic minima corporis, accusantium architecto quo laudantium blanditiis ullam voluptas in laborum sit? Est magni sapiente iusto quia vitae, vitae molestiae iste? Tempore expedita maiores.
Corporis nulla inventore tenetur tempore?
Nesciunt itaque nam ipsum voluptate quos impedit facere id. Saepe quibusdam maiores optio id natus ut quas pariatur.
Quas tenetur tempore mollitia eius provident quidem ea quam ut et, corporis beatae iure error eligendi possimus maiores ipsum numquam, enim fuga cumque blanditiis eius id excepturi ut quia iusto hic quisquam, commodi incidunt pariatur. Aliquid consequatur nostrum maiores veniam magnam tenetur aperiam quis, dignissimos in tenetur explicabo ea ratione provident corrupti necessitatibus eveniet iure autem, ullam possimus ea natus ipsam.
Minus unde totam aliquid natus quis, eos ullam autem pariatur ducimus quibusdam iste, cum ab quasi iusto ut culpa quam illum hic laboriosam
                    </section>
                    <section>
                    <header><h2>Section Title</h2></header>
                    Laborum eveniet cupiditate qui placeat adipisci dolor itaque porro corporis, quae expedita quis sint quas eveniet voluptatum velit, magnam alias totam architecto possimus porro? Dolores ex tempora ipsam earum architecto hic vel, rem ducimus praesentium fugit quisquam veniam, esse itaque quos eligendi aut labore tempora. Quidem magni soluta. Odit reiciendis repellat laudantium corrupti totam provident, eveniet cumque similique voluptatum obcaecati fugit perspiciatis vero in, animi facere neque ipsam iure sequi quo minus illum magni aliquam odio, nemo officiis eius aut dolor consequuntur blanditiis adipisci perferendis non nostrum?
Delectus rem atque possimus vel voluptate, hic ipsa ea eligendi inventore suscipit, inventore architecto consectetur officia illum aperiam labore totam dicta. Fugiat ut consequuntur sunt minima, ducimus excepturi iure et sed voluptas hic minima corporis, accusantium architecto quo laudantium blanditiis ullam voluptas in laborum sit? Est magni sapiente iusto quia vitae, vitae molestiae iste? Tempore expedita maiores.
Corporis nulla inventore tenetur tempore?
Nesciunt itaque nam ipsum voluptate quos impedit facere id. Saepe quibusdam maiores optio id natus ut quas pariatur.
Quas tenetur tempore mollitia eius provident quidem ea quam ut et, corporis beatae iure error eligendi possimus maiores ipsum numquam, enim fuga cumque blanditiis eius id excepturi ut quia iusto hic quisquam, commodi incidunt pariatur. Aliquid consequatur nostrum maiores veniam magnam tenetur aperiam quis, dignissimos in tenetur explicabo ea ratione provident corrupti necessitatibus eveniet iure autem, ullam possimus ea natus ipsam.
Minus unde totam aliquid natus quis, eos ullam autem pariatur ducimus quibusdam iste, cum ab quasi iusto ut culpa quam illum hic laboriosam
                    </section>
                </section>
            </article>
        </div>
        <div id="page-sidebar" class="well">
            <div class="section">
                <ul>
                    <li>menu1</li>
                    <li>menu2</li>
                    <li>menu3</li>
                    <li>menu4</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

demo.scss：

@import "../../lib/bootstrap.scss";
@import "../../lib/responsive.scss";

// body is the fluid containter
body { @extend .container-fluid; }

// make elements "column fluid"
#page-body, 
#page-sidebar {
    @extend [class*="span"];
}
section:not(.main) > section {
    @extend [class*="span"];
    @media (max-width: 1199px) { margin-left: 0 !important; }
}

// make elements "row fluid"
#page,
#page > section:not(.main) {
    @extend .row-fluid;
}

// responsive grid
@media (min-width: 768px) and (max-width: 979px) {
    #page-body { @include grid-fluid-span(7, $fluidGridColumnWidth768, $fluidGridGutterWidth768); }
    #page-sidebar { @include grid-fluid-span(5, $fluidGridColumnWidth768, $fluidGridGutterWidth768); }
}

@media (min-width: 980px) and (max-width: 1199px) {
    #page-body { @include grid-fluid-span(7, $fluidGridColumnWidth, $fluidGridGutterWidth); }
    #page-sidebar { @include grid-fluid-span(5, $fluidGridColumnWidth, $fluidGridGutterWidth); }
}

@media (min-width: 1200px) {
    section:not(.main) > section { @include grid-fluid-span(6, $fluidGridColumnWidth1200, $fluidGridGutterWidth1200); }
    #page-body { @include grid-fluid-span(8, $fluidGridColumnWidth1200, $fluidGridGutterWidth1200); }
    #page-sidebar { @include grid-fluid-span(4, $fluidGridColumnWidth1200, $fluidGridGutterWidth1200); }
}

最佳，

在Bootstrap网格中动态更改列数

2 个答案: