html - Bootstrap Grid and column offset -
i've following html:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>  <div class="container">      <div class="row">          <div class="col-sm-5">              .col-sm-5          </div>          <div class="col-sm-5 col-sm-offset-2">             .col-sm-5 .col-sm-offset-2          </div>     </div>  </div>  according bootstrap docs should fit row. there somethin wrong, can't figure out.
when take 11-columns account fits (notice col-sm-4 on last div instead of col-sm-5):
<div class="container">     <div class="row">         <div class="col-sm-5">             .col-sm-5         </div>         <div class="col-sm-4 col-sm-offset-2">            .col-sm-5 .col-sm-offset-2         </div>    </div> </div>   what i'm doing wrong in first html?
works fine me in full screen, may replacing xs you! on 1366 width resolution. clicking on full page in below snippet works fine me.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>  <div class="container-fluid">    <div class="row">      <div class="col-sm-5">        .col-sm-5      </div>      <div class="col-sm-offset-2 col-sm-5">        .col-sm-5 .col-sm-offset-2      </div>    </div>  </div>  since totally depends on screen size, believe screen size not accommodating sm, using xs show in right way.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>  <div class="container-fluid">    <div class="row">      <div class="col-xs-5">        .col-xs-5      </div>      <div class="col-xs-offset-2 col-xs-5">        .col-xs-5 .col-xs-offset-2      </div>    </div>  </div>  also, noted using borders. make sure give this:
* {box-sizing: border-box;}      
Comments
Post a Comment