html5 - Bootstrap 3 RC1 responsive fluid grid system breakpoint issues -


i have designed website testing bootstrap 3 rc1. have 4 grid in row(12 grid / 4 =col-3) , when tried minimize small-display area of grids-row not going second line has scaling-up same row.

my site : http://goo.gl/zcn8ri

for example below code, have used class="col-2 col-sm-1 col-lg-3", need in large display grid should display '3-col' , small display should 2 col(line-break) not happening ...

  <div class="row">     <div class="col-2 col-sm-1 col-lg-3">       <div class="pc-area">         <center>           <a href="#"><span class="area-positions"><img src="images/pc-laptop.png" alt="pc laptop"></span></a>         </center>       </div>     </div>     <div class="col-2 col-sm-1 col-lg-3">       <div class="mac-area">         <center>           <a href="#"><span class="area-positions"><img src="images/mac-macbook.png" alt="mac"></span></a>         </center>       </div>     </div>     <div class="col-2 col-sm-1 col-lg-3">       <div class="iphone-area">         <center>           <a href="#"><span class="area-positions"><img src="images/iphone.png" alt="iphone"></span></a>         </center>       </div>     </div>     <div class="col-2 col-sm-1 col-lg-3">       <div class="ipad-area">         <center>           <a href="#"><span class="area-positions"><img src="images/ipad.png" alt="ipads"></span></a>         </center>       </div>     </div>   </div> 

also background not looking in small display.

please suggest.

thanks!!!

just remove col-2 , below

  <div class="row">     <div class="col-sm-3 col-lg-3">       <div class="pc-area item">         <center>           <a href="#"><span class="area-positions"><img src="images/pc-laptop.png" class="img-responsive" alt="pc laptop"></span></a>         </center>       </div>     </div>     <div class="col-sm-3 col-lg-3">       <div class="mac-area item">         <center>           <a href="#"><span class="area-positions"><img src="images/mac-macbook.png"  class="img-responsive"  alt="mac"></span></a>         </center>       </div>     </div>     <div class="col-sm-3 col-lg-3">       <div class="iphone-area item">         <center>           <a href="#"><span class="area-positions"><img src="images/iphone.png"  class="img-responsive"  alt="iphone"></span></a>         </center>       </div>     </div>     <div class="col-sm-3 col-lg-3">       <div class="ipad-area item">         <center>           <a href="#"><span class="area-positions"><img src="images/ipad.png"  class="img-responsive"  alt="ipads"></span></a>         </center>       </div>     </div>   </div> 

also in css

.pc-area {     background: url(images/pc-laptop-area.png) no-repeat scroll 0 0 transparent;     min-height: 225px;     max-width: 100%;     height: auto; } .mac-area {     background: url(images/mac-area.png) no-repeat scroll 0 0 transparent;     min-height: 225px;     max-width: 100%;     height: auto; } .iphone-area {     background: url(images/iphone-area.png) no-repeat scroll 0 0 transparent;     min-height: 225px;     max-width: 100%;     height: auto; } .ipad-area {     background: url(images/ipad-area.png) no-repeat scroll 0 0 transparent;     min-height: 225px;     max-width: 100%;     height: auto; } .ipod-area {     background: url(images/ipod-area.png) no-repeat scroll 0 0 transparent;     min-height: 225px;     max-width: 100%;     height: auto;     } .galaxy-area {     background: url(images/galaxy-area.png) no-repeat scroll 0 0 transparent;     min-height: 225px;     max-width: 100%;     height: auto; } .macpro-area {     background: url(images/macpro-area.png) no-repeat scroll 0 0 transparent;     min-height: 225px;     max-width: 100%;     height: auto;     } .business-area {     background: url(images/web-business-area.png) no-repeat scroll 0 0 transparent;     min-height: 225px;     max-width: 100%;     height: auto; } 

so medium layout looks great , better not put image text pallets...


Comments

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

Function that returns a formatted array in VBA -