デスクトップ ブラウザ用のレイアウトと、タブレット ブラウザ用のその他のレイアウトを設計しようとしています。
デスクトップ ブラウザーでは 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」などのクラスを追加し、ルールを「.content」と「.span9」をターゲットに変更することもできます。
以下は、 HTML ドキュメントに Bootstrap マークアップを追加せずに実行する例とライブ デモです。
デモ.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); }
}
一番、