css - Twitter Bootstrap Remove Margin of the Span

Question

I am using Twitter Bootstrap. And i have used span8 and span 4 in a row. Is there anyway to remove the leading margin-left:20px from the first span of the row without needing to over ride it manually ?

Answer 1

That 20px margin you see on your #mainContent area is due to the setup of the bootstrap grid, which uses a container of 940px, it is supposed to be removed by the .row container with a margin-left:-20px property. In your setup, your content area is working just the way it was designed too, but your top pageHeader and mainNav sections are not appropriately inserted into the grid, you just have divs inside the .row top sections that are not being contained within the proper containers of the grid.

To fix this you can just insert all of your pageHeader and mainNav elements inside a .span12 container and everything should stack accordingly.

Fixed markup

<header class="row" id="pageHeader">
    <div class="span12">
        <div id="logo">Logo</div>
        <div id="userDetails">userDetails</div>
    </div>
</header>

<nav id="mainNav" class="row">
    <div class="span12">
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="dashboard.html">Dashboard</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="idea_exchange.html">Idea Exchange</a></li>
        </ul>
    </div>
</nav>

Also, quick tip, you can switch your mainNav background color to the proper grid container of .span12 simply by targeting it like so:

nav#mainNav .span12 {
    background: url("../images/nav_bar_bg.png") repeat-x scroll 0 0 transparent;
    height: 45px;
    overflow: hidden;
}

Answer 2

you can add a class in your css with an !important:

example:

.no_margin{
margin:0px !important;
}

and add that class to your html when required.

(sorry for my bad english xD)

Answer 3

there is also small less utility at

http://getkickstrap.com/extras/#single-view

called flushspan

Answer 4

By using "row" or "row-fluid" class as parent of your span class

<div class="row">
    <div class="span3">
        <ul>
           <li><a href="home.html">Home</a></li>
           <li><a href="dashboard.html">Dashboard</a></li>
           <li><a href="blog.html">Blog</a></li>
           <li><a href="idea_exchange.html">Idea Exchange</a></li>
        </ul>
    </div>
</div>