부트 스트랩 컨테이너 - 유체 및 컨테이너

Question

트위터 부트 스트랩을 사용하여 웹 사이트를 디자인하고 있습니다. 헤더 영역을 제외한 모든 것이 잘 작동합니다.

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

그것은, 그러나 당신이 그것을 외부에서 배치, 또는 등 그것을 position:absolute을 제공하여 제어하는 ​​CSS를 사용하여 컨테이너의 흐름 중 하나에서 제거해야합니다

뭔가 같은 :

  <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

나는 position : absolute 속성을 사용하고 싶지 않다고 생각한다. 그러나 로고 배경 영역을 .container 클래스 외부의 왼쪽 영역을 채우기 위해 만들 수는 없다. 당신이하는 일은 .container 안에 있기 때문에 수업. 유일한 방법은 절대 위치를 지정하거나 .logo 클래스를 .container 클래스 외부 (.container 클래스 바로 위)로 이동하는 것입니다.