2014-10-09 3 views
0

브라우저보기의 로고가 왼쪽이고 한 단어가 중간에 있고 탐색 메뉴가 오른쪽 인 세 ​​열 레이아웃이 있습니다. 풀 브라우징 기능이 정상입니다.트위터 부트 스트랩 열이 지워지지 않음

중간 또는 모바일보기로 크기를 조정하면 열이 지워지지 않고 올바르게 스태킹되지 않습니다. 외부

<!-- Fixed navbar --> 
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="header"> 
     <div class="col-xs-6 col-sm-4"> 
      <a href="{{ URL::route('home') }}"> 
      <div class="header_group"> 
       <img src="../../images/logo.png"> 
      </div><!--header group --> 
      </a>     
     </div> 
     <div class="col-xs-6 col-sm-3"></div> 
      <div class="col-xs-6 col-sm-4"> 
      <p> </p> 
      </div> 
      <div class="col-xs-6 col-sm-4"> 
      @include('layout.navigation') 
      </div> 
     </div><!-- main header --> 
     </div><!-- row -->     
    </div> 
</div> 

: http://postimg.org/image/sa1nvyw8j/ 여기

내 코드입니다 : http://postimg.org/image/wvfl1hkut/ 여기

모바일 중순보기로 고정 필요가 무엇 : 여기

내가 전체보기를 지금 얻고 무엇인가 CSS 시트

.header { 
    width: 100%; 
    height: auto; 
    margin: 0 auto; 
    background: red; 
} 

.header_group { 
    background-color: none; 
    width: 100%; 
    height: auto; 
    display: inline-table; 
    font-size: 1.5em; 
    font-weight: 400; 
    font-family: 'Roboto', sans-serif; 
    color: #f0fff0; 
    clear: none; 
    margin-top: 5%; 
} 

.header_text { 
    vertical-align: middle; 
    display: inline; 
    text-align: center; 
    color: #f05152; 
} 

.nav { 
    width: auto; 
    height: auto; 
    margin-top: 12%; 
} 

.nav a { 
    color: #000; 
    padding-left: 10%; 
    margin-left: 4%; 
} 

.navbar { 
    width: 100%; 
    height: 20%; 
    padding-top: 0; 
} 

.wrapper { 
    width: 100%; 
    height: 500px; 
    background: url(../../../images/yellow.png) repeat,   
} 
+1

'col-sm-3'이 아닌'.col-sm-3' 클래스에 정의했기 때문에? –

+0

업데이트 된 코드는 거기에 기간이 있었지만 해결되지 않았습니다. – Bobby

답변

0

부트 스트랩에는 12 열 그리드. 각 열 12 개 세트는 .row에 포함되어야합니다.

코드에 4 개의 .col-xs-6 열이 있으며 총 24 개의 열이 있습니다. 또한 3 .col-sm-4 및 1 .col-sm-3 개의 열이 있으며 총 15 개의 열이 있습니다.

열을 12로 올바르게 놓으면 올바르게 정리됩니다.

+0

나는 당신이 말한 것과 코드를 변경했지만, 같은 문제가 있습니다. http://laravel.io/bin/9b5Y1 – Bobby

+1

엄청난 양의 여분의 팽창입니다. –

0

참고 : 문서에서 ...

  • 콘텐츠 컬럼 내에 배치되어야하고, 열만 행의 직접적인 아이 수 있습니다.

.header.