Twitter Bootstrap Remove Margin of Span

Question

Я использую Twitter Bootstrap. И я использовал span8 и span 4 подряд. В любом случае, нужно удалить левую верхнюю границу: 20px от первого интервала строки без необходимости перематывать его вручную?

Answer 1

Это 20px запас вы видите на #mainContent области связано с настройкой начальной загрузки сетки, которая использует контейнер 940px, он должен быть удален .row контейнер с margin-left:-20px собственности. В вашей настройке ваша область содержимого работает так же, как она была разработана, но ваши верхние разделы pageHeader и mainNav не были правильно вставлены в сетку, у вас есть только разделы в верхних разделах .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; 
} 

Answer 2

есть также мало меньше полезности при

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

называется flushspan

Answer 3

вы можете добавить класс в вашем CSS с важным:

пример:

.no_margin{ 
margin:0px !important; 
} 

и добавить этот класс в HTML, когда это требуется.

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

Answer 4

с помощью «строки» или класса «строка-жидкости» в качестве родителя вашего диапазона класса

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