Twitter Bootstrap Удалить границу диапазона

Это поле в 20 пикселей, которое вы видите в области #mainContent, связано с настройкой сетки начальной загрузки, в которой используется контейнер 940px, предполагается, что он будет удален контейнером .row со свойством margin-left:-20px. В вашей настройке ваша область контента работает именно так, как она была разработана, но ваши верхние разделы pageHeader и mainNav не вставлены в сетку должным образом, у вас просто есть div внутри верхних разделов .row, которые не содержатся в соответствующих контейнерах. сетки.

Чтобы исправить это, вы можете просто вставить все свои элементы pageHeader и mainNav в контейнер .span12, и все должно сложиться соответствующим образом.

Исправлена ​​разметка

<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>

Кроме того, быстрый совет: вы можете переключить цвет фона mainNav на правильный контейнер сетки .span12, просто настроив его следующим образом:

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

вы можете добавить класс в свой css с помощью !important:

пример:

.no_margin{
margin:0px !important;
}

и добавьте этот класс в свой html, когда это необходимо.

(извините за мой плохой английский xD)

есть также небольшая меньшая полезность в

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

называется промывкой

Используя класс «row» или «row-fluid» в качестве родителя вашего класса span

<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>