CODEWITHSUNDEEP
twitter-bootstrap
Kizer Yakuza
Kizer Yakuza

Reputation: 767

Can't get the right number of spans on a row

I'm having a problem with the most basic of Bootstrap (2.3.2) structures, I can't seem to get 4x 3spans in/on a row. The fourth one gets pushed down a level. I get the same result when adding a link to the responsive css file. I can't get them to "fit" in one line without playing around with the margins, but I shouldn't have/need to. Thanks a lot for your 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 your other scripts here -->
        <footer></footer>
    </div>
    </body>
</html>

Upvotes: 1

Views: 47

Answers (1)

Matt
Matt

Reputation: 1242

Remove the <div class="span12" /> element and let the .span3s reside inside the row by 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 you can nest a new row inside the span. The row class resets the padding/margin so you can utilize the full width of the span it is 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>

Upvotes: 2

Related Questions