Geek Answers Handbook

Dynamically changing the number of columns in Bootstrap networks

I am trying to create a layout for desktop browsers and another layout for tablet browsers.

I want to see 3 + 9 columns in desktop browsers (3 for the sidebar and 9 for content) and 12 columns (content only) in tablets. I do not need a side panel in tablets, so I need to show the contents of the liquid in this case (100% width)

I wrote this code and it works great with a desktop browser, but when I test it in a tablet browser, I see only 9 columns.

Can anybody help me?

thanks

... <div class="row-fluid"> <div class="span3 visible-desktop"> <!-- Render Sidebar --> </div> <div class="span9"> <!-- Render Content--> </div> </div> ...
+4
source share
2 answers

Try something like this at the end of your css:

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

}

You might want to add an extra class to this range, such as “content”, and change the rule to the target value .content "verus" .span9 '

+1
source

Here's an example and a live demo doing this without adding Bootstrap markup to your html document.

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

Best

0
source

More articles:


All Articles