4

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

我想在桌面浏览器中看到 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>
...
4

2 回答 2

1

在你的 css 末尾尝试这样的事情：

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

}

您可能希望向该跨度添加一个额外的类，例如“内容”，并将规则更改为目标“.content”与“.span9”

于 2012-12-12T17:40:21.370 回答
0

这是一个示例和现场演示，无需将 Bootstrap 标记添加到您的 html 文档。

演示.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>

演示.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); }
}

最好的，

于 2013-03-13T12:09:17.167 回答