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

Ответ 1

Эта маржа 20px, которую вы видите в области #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;
}

Ответ 2

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

Пример:

.no_margin{
margin:0px !important;
}

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

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

Ответ 3

в

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

называется flushspan

Ответ 4

Используя класс "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>