android - Bootstrap column layout for all devices -
i have question bootstrap column layout. necessary specify column layout each device width? example, have item detail, take half of screen in center. made wrapper div classes col-*-6 , col-*-offset-3 (so take 6 columns , offset 3 columns).
then, in element, have children take 3 columns , 1 take 9 fill full width of container.
<div class="col-md-6 col-md-offset-3 toppad"> <table> <tr><td class="col-md-3">project id:</td><td class="col-md-9">{$project['name']}</td></tr> </table> </div> is correct? , possible make work devices without coding each of them?
luboš suk, hi there.
your main question (need classes)... yes is.
if want control how want viewed on devices need use col-xx-xx classes...
or choose correct single class show in demo here you.
if use col-xs-xx rather col-md-xx way can work too.
your option of red , grey blocks using 1 col-md-xx class not work want too, both stay side side.
you see red , grey blocks use col-md-xx , both loose need be. start stack.
the way place main block in middle right....but.... when use col-xx-offset-x , want/need div block go full screen on small device have 0 class @ view.
the second block in demo shows when can control offset go full width.
if want little more control of therow width @ bottom option in demo.
here fiddle.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>starter template bootstrap</title> <!-- bootstrap core css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <style> body { padding-top: 50px; } .spacer { margin-top: 2%; margin-bottom: 2%; } .glyph-text { color: darkorange; font-size: 1.3em; } .block { min-height: 200px; background-color: darkorange; } .block1 { min-height: 50px; background-color: darkorange; } .block2 { color: #fff; min-height: 40px; margin-top: 2%; margin-bottom: 2%; background-color: blueviolet; } .block3 { min-height: 40px; margin-top: 2%; margin-bottom: 2%; background-color: steelblue; } .block-a { color: #fff; height: 40px; margin-top: 2%; margin-bottom: 2%; background-color: red; } .block-b { color: #fff; height: 40px; margin-top: 2%; margin-bottom: 2%; background-color: grey; } .center { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .center-row { position: absolute; left: 0; right: 0; margin: auto; } </style> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top "> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand " href="#">project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">home</a></li> <li><a href="#about">about</a></li> <li><a href="#contact">contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container col-lg-12"> <div class="text-center"> <h3>the red , grey blocks use 1 col-md-xx class.</h3> </div> <div class="row col-md-6 col-md-offset-3 block"> <div class="col-md-9 block-a"> col-md-9 <p class="text-center"> <span class="glyphicon glyphicon-remove"></span> </p> </div> <div class="col-md-3 block-b"> col-md-3 <p class="text-center"> <span class="glyphicon glyphicon-remove"></span> </p> </div> <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 block2"> col-all-9 <p class="text-center"> <span class="glyphicon glyphicon-ok glyph-text"></span> </p> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 block3"> col-all-3 <p class="text-center"> <span class="glyphicon glyphicon-ok glyph-text"></span> </p> </div> <div class="col-xs-9 block2"> col-xs-9 <p class="text-center"> <span class="glyphicon glyphicon-ok glyph-text"></span> </p> </div> <div class="col-xs-3 block3"> col-xs-3 <p class="text-center"> <span class="glyphicon glyphicon-ok glyph-text"></span> </p> </div> <div class="text-center"> row col-md-6 col-md-offset-3 </div> </div> </div><!-- /.container --> <div class="container col-lg-12 spacer"></div> <div class="container col-lg-12"> <div class="row col-xs-12 col-xs-offset-0 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 block1"> <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 block2"> col-all-9 <p class="text-center"> <span class="glyphicon glyphicon-ok glyph-text"></span> </p> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 block3"> col-all-3 <p class="text-center"> <span class="glyphicon glyphicon-ok glyph-text"></span> </p> </div> <div class="col-xs-9 block2"> col-xs-9 <p class="text-center"> <span class="glyphicon glyphicon-ok glyph-text"></span> </p> </div> <div class="col-xs-3 block3"> col-xs-3 <p class="text-center"> <span class="glyphicon glyphicon-ok glyph-text"></span> </p> </div> <div class="text-center"> row col-xs-12 col-xs-offset-0 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 </div> </div> </div><!-- /.container --> <div class="container col-lg-12 spacer"></div> <div class="container col-lg-12"> <div class="row col-xs-11 col-sm-9 col-md-7 col-lg-5 block center-row"> <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 block2"> col-all-9 </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 block3"> col-all-3 </div> <div class="col-xs-9 block2"> col-xs-9 </div> <div class="col-xs-3 block3"> col-xs-3 </div> <div class="text-center"> row col-xs-11 col-sm-9 col-md-7 col-lg-5 <p>the row not using offset.</p> <p>the row centered, using custom css.</p> </div> </div> </div><!-- /.container --> <!-- bootstrap core javascript --> <!-- placed @ end of document pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html>
Comments
Post a Comment