Загрузочный контейнер-жидкость и контейнер

Question

Я разрабатываю сайт, используя twitter bootstrap. Все работает отлично, за исключением области заголовка.

Screenshot

Я использовал .container-жидкость, чтобы установить полную ширину фона. И использовать .container для размещения содержимого в пределах 960px. Но проблема с фоном логотипа. Я хочу, чтобы область логотипа заполнила левую область за пределами класса .container. Является ли это возможным?

Вот мой разметки -

<div class="container-fluid full-width"> 
     <div class="row-fluid header-top"> 
      <div class="container"> 
       <div class="span4 logo-area"> 
        <div class="logo"> 
         <h1> <a href=""> hello.</a></h1> 
        </div> 
       </div> 

       <div class="menu span8"> 
        <div class="navbar"> 
         <ul class="nav" id="nav"> 
          <li><a href="#"> Home </a></li> 
          <li><a href="#"> Menu Item2 </a></li> 
          <li><a href="#"> Menu Item3 </a></li> 
          <li><a href="#"> Menu Item4 </a></li> 
          <li><a href="#"> Menu Item5 </a></li> 
          <li><a href="#"> Menu Item6 </a></li>    
         </ul> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Спасибо заранее.

Answer 1

Это, но вам нужно будет удалить его из потока контейнера либо путем помещения его вне его, или с помощью CSS, чтобы контролировать его, давая ему position:absolute т.д.

Что-то вроде:

  <div class="logo"> 
       <h1> <a href=""> hello.</a></h1> 
      </div> 

<style> 
.logo { 
position:absolute; 
top:100px; 
left:100px; 
} 
</style> 

<div class="container-fluid full-width"> 
     <div class="row-fluid header-top"> 
      <div class="container"> 

       <div class="menu span8"> 
        <div class="navbar"> 
         <ul class="nav" id="nav"> 
          <li><a href="#"> Home </a></li> 
          <li><a href="#"> Menu Item2 </a></li> 
          <li><a href="#"> Menu Item3 </a></li> 
          <li><a href="#"> Menu Item4 </a></li> 
          <li><a href="#"> Menu Item5 </a></li> 
          <li><a href="#"> Menu Item6 </a></li>    
         </ul> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 2

Я думаю, что вы не хотите использовать позицию: абсолютное свойство. Однако вы не можете сделать свою область логотипа, чтобы заполнить левую область вне класса .container. Поскольку все, что вы делаете, останется внутри .container класс. Единственный способ - либо сделать позицию: абсолютный, либо переместить свой .logo класс за пределами класса .container (чуть выше класса .container).