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.

enter image description here

<!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

Popular posts from this blog

c# - Better 64-bit byte array hash -

-
i need hash algorithm produces 64-bit hash code ( long ) fewer collisions string.gethashcode() , fast (no expensive calls cryptographic functions). here's implementation of fnv still shows 3% of collisions after testing 2 million random strings. need number way lower. void main() { const string chars = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!#@$%^&*()_+}{\":?><,./;'[]0123456789\\"; const int n = 2000000; var random = new random(); var hashes = new hashset<long>(); int collisions = 0; for(int = 0; < n; i++) { var len = random.next(chars.length); var str = new char[len]; (int j = 0; j < len; j++) { str[j] = chars[random.next(chars.length)]; } var s = new string(str); if(!hashes.add(get64bithash( s ))) collisions++; } console.writeline("collision percentage after " + n + " random strings: " + ((doubl
Read more

webrtc - Which ICE candidate am I using and why? -

-
[questions in bold below] i have setup kurento media server 5.1.3 in datacenter behind firewall running os ubuntu 14.04. has 2 network cards: 222.222.222.222 (eth0 - private ip) 111.111.111.111 (eth1 - public ip) attached below sdp (setremotedescription) when browser connected kurento media server type: answer, sdp: v=0 o=- 5487318114793304426 0 in ip4 0.0.0.0 s=kurento media server c=in ip4 0.0.0.0 t=0 0 a=group:bundle audio video m=audio 59068 rtp/savpf 111 0 c=in ip4 111.111.111.111 a=rtpmap:111 opus/48000/2 a=rtpmap:0 pcmu/8000 a=sendrecv a=rtcp:59068 in ip4 111.111.111.111 a=rtcp-mux a=ssrc:669011897 cname:user39019747@host-6e83e4c2 a=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time a=mid:audio b=as:20 a=ice-ufrag:ymdk a=ice-pwd:lylifk5ueqzpwm91ddj37e a=fingerprint:sha-256 ff:0f:81:8c:41:4e:b4:b6:c6:d8:36:f3:d6:5f:09:fd:5f:af:13:b3:9d:fc:12:66:ac:f3:56:d6:5b:0a:73:5d a=candidate:1 1 udp 2013266431 111.111.111.111 55239 typ host a=candidate:2 1 udp
Read more

php - Zend Framework / Skeleton-Application / Composer install issue -

-
i trying create zend framework application using skeleton in netbeans. when run composer install, following error message: "c:\php\php.exe" "c:\composer\composer.phar" "--ansi" "--no-interaction" "update" "--dev" using deprecated option "dev". dev packages installed default now. loading composer repositories package information updating dependencies (including require-dev) requirements not resolved installable set of packages. problem 1 - package requires php >=5.5 php version (5.4.42) not satisfy requirement. problem 2 - installation request zendframework/zendframework 2.5.1 -> satisfiable zendframework/zendframework[2.5.1]. - zendframework/zendframework 2.5.1 requires php >=5.5 -> php version (5.4.42) not satisfy requirement. done. apparently, zend framework only needs php 5.3+ contradicts above. need use php 5.4. my composer.json following: { "name": "
Read more