2016-09-07 2 views
0

부트 스트랩 그리드 시스템에 약간의 문제가 있습니다. 페이지 상단에 내비게이션 div를 만들었습니다. 더 큰 화면 크기에서는 모두 잘 작동합니다. 화면 크기를 xs로 줄이면 화면이 깨집니다. 다음은 내가 할 일입니다 :서로 다른 부트 스트랩 그리드 시스템 열

| logo | link 1 | link 2 | link 3 | link 4| 

위의 내용은 xs를 제외한 모든 화면에 적용됩니다.

| logo | link 1 | 
|  | link 2 | 
|  | link 3 | 
|  | link 4 | 

을 그리고 내가 원하는 것은 : : XS를 들어 나는군요 하나의 전체 행으로

<div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-6"> 
      <a href="/"><h1 class="logo">LOGO</h1></a> 
     </div> 
    </div> 
    <div class="row navbar navigation"> 
     <div class="col-xs-12 col-md-6 navLinks"> 
      <div class="col-xs-12 col-md-3 navLink"> 
       <h4 class="links"><a href="videos.html">LINK 1</a></h4> 
      </div> 
      <div class="col-xs-12 col-md-3 navLink"> 
       <h4 class="links"><a href="photos.html">LINK 2</a></h4> 
      </div> 
      <div class="col-xs-12 col-md-3 navLink"> 
       <h4 class="links"><a href="about-us.html">LINK 3</a></h4> 
      </div> 
      <div class="col-xs-12 col-md-3 navLink"> 
       <h4 class="links" id="contactLink"><a>LINK 4</a></h4> 
      </div> 
     </div> 
    </div> 
</div> 

답변

1

로드는 제거 :

| logo | 
| link 1 | 
| link 2 | 
| link 3 | 
| link 4 | 

여기 내 코드입니다. 사업부 클래스의 클래스 행 = 행 네비게이션 바

은 행 로고 부분에 대한 DIV 행 닫는 태그를 제거하고이 일을하지만, CSS의 오류도 있었다 마지막

+0

에 넣어. 나는 디스플레이를했다 : 플렉스; –

관련 문제