twitter bootstrap - Can't get the right number of spans on a row -
i'm having problem basic of bootstrap (2.3.2) structures, can't seem 4x 3spans in/on row. fourth 1 gets pushed down level. same result when adding link responsive css file. can't them "fit" in 1 line without playing around margins, shouldn't have/need to. lot help! k
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>bootstrap index</title> <script type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> </head> <body><div class="container"> <header> <div class="row"> <h2 class="span12">portfolio</h2> </div> </header> <nav> <div class="row"> <div class="span12"> <div class="span3"><a href="indexredo.html">home</a></div> <div class="span3"><a href="newsredo.html">news</a></div> <div class="span3"><a href="galleryredo.html">gallery</a></div> <div class="span3"><a href="contactredo.html">contact</a></div> </div> </div> </nav> <section> <div class="row"> <div class="span12"> <img src="img/bridge.jpg" alt="..picture here.."/> </div> </div> </section> <script type="text/javascript" src="js/jquery.1.10.2.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <!-- put other scripts here --> <footer></footer> </div> </body> </html>
remove <div class="span12" />
element , let .span3
s reside inside row themselves.
<div class="row"> <div class="span3"><a href="indexredo.html">home</a></div> <div class="span3"><a href="newsredo.html">news</a></div> <div class="span3"><a href="galleryredo.html">gallery</a></div> <div class="span3"><a href="contactredo.html">contact</a></div> </div>
alternatively can nest new row inside span. row class resets padding/margin can utilize full width of span embedded within.
<div class="row"> <div class="span12"> <div class="row"> <div class="span3"><a href="indexredo.html">home</a></div> <div class="span3"><a href="newsredo.html">news</a></div> <div class="span3"><a href="galleryredo.html">gallery</a></div> <div class="span3"><a href="contactredo.html">contact</a></div> </div> </div> </div>
Comments
Post a Comment