我正試圖設計桌面瀏覽器和其他平板電腦瀏覽器佈局的佈局。在引導程序網格中動態更改列數
我想在桌面瀏覽器中看到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>
...
在你的CSS年底嘗試是這樣的：
@media (max-width: 979px){
.span9 {width: 100% !important;}
}
您可能需要額外的類添加到跨度，如「內容'，並將規則更改爲目標'.content'verus'.span9'
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); }
}
最佳，
感謝。 該代碼正常工作。 – Gonzalo