내 코드가 응답하지 않는 이유는 무엇입니까?

-1

올바른 부트 스트랩 구조, 클래스 등을 사용하고 있다고 생각합니다. 그렇다면 브라우저의 크기를 조정할 때 레이아웃이 완전히 엉망이되는 이유는 무엇입니까? 내가 도대체 뭘 잘못하고있는 겁니까?내 코드가 응답하지 않는 이유는 무엇입니까?

여기 * 당신은 단지 COL-SM-사용하고, HTML 코드에서 full code.

body { 
    font-family: 'Roboto', sans-serif; 
} 
h2 { 
    font-size: 32px; 
    font-weight: bold; 
} 
h3 { 
    font-size: 16px; 
    font-weight: bold; 
} 
.container { 
    max-width: 1056px; 
} 
p { 
    font-size: 14px; 
} 
nav.navbar { 
    padding: 12px; 
    border-radius: 0; 
    border: none; 
    margin-bottom: 0; 
    background: none; 
} 
nav.navbar li { 
    font-size: 14px; 
    font-weight: bold; 
    text-transform: uppercase; 
} 
nav.navbar li a { 
    padding: 8px 20px; 
    margin-top: 0.5em; 
    border-radius: 4px; 
} 
nav.navbar li a:link { 
    color: #9faeaf; 
} 
nav.navbar li a.active:link, 
nav.navbar li a.active:visited { 
    color: #fff; 
}

출처

2016-08-06 Sam

당신은 너무 HTML을 표시해야합니다 경우 당신은 더 나은 귀하의 사이트를 사용자 정의 할 수 있도록 더 CSS Media Queries을 사용하는 것이 좋습니다. – JJJ

아마도 당신은 많은 CSS를 오버라이드했습니다 – jonju

@Juhana 그것은 모두 codepen 링크에 있습니다. – Sam

동안 그 코드를 사용합니다. 예를 들어 section#about을 가져 가십시오. 스타일 시트에서 명시적인 height: 980px;을 제거하면 픽셀 픽셀 단락이 더 이상 과 겹치지 않게됩니다. 사용할 수있는 완벽한 템플릿을 찾으십니까? 제목.

둘째, 부적절하게 부트 스트랩 표를 사용하고 있습니다. 거의 모든 섹션에서 .container 클래스를 사용하고있는 것으로 나타났습니다. 이상적으로는 페이지를 캡슐화하는 하나의.container 클래스 만 제거해야합니다 (하나의 페이지에서 다른 컨테이너 크기를 사용하려는 경우 제외).

<body> 
    <div class="container"> 
     <section id="intro" class="row"> 
      <div class="col-md-4"> 
      </div><!-- end .col-md-4 --> 

      <div class="col-md-4"> 
      </div><!-- end .col-md-4 --> 

      <div class="col-md-4"> 
      </div><!-- end .col-md-4 --> 
     </section><!-- end #intro section --> 

     <section id="about" class="row"> 
      <div class="col-md-6"> 
      </div><!-- end .col-md-6 --> 

      <div class="col-md-6"> 
      </div><!-- end .col-md-6 --> 
     </section><!-- end #about section --> 
    </div><!-- end .container --> 
</body>

주 : 여기

는 예를 들어 당신이 그 요소가 이미 그랬던 것처럼 내부에 별도의 용기를 을 넣을 수있는 경우에는 Navbar를/바닥 글과 예외가있다 Navbar와 함께.

세 번째로 페이지의 각 세로 섹션에 대해 ".row"클래스를 더 많은 블록으로 사용하십시오. 섹션 내에서이 작업을 수행했으나 각 섹션에서 컨테이너를 제거한 후에 해당 섹션에 각각 .row 클래스를 부여하여 섹션 자체를 개별 행으로 만드는 것이 좋습니다.

다음, 당신은 kosmastsk 제안으로 모든 화면 크기에 대한 규칙을 정의 할 필요하지 않습니다. 당신이 그런 식으로 좋아한다면 그냥 col-sm에 대한 중단 점을 정의하는 것으로 보인다. 그러면 그것은 당신에게 달려있다. 그래도 mobile first을 개발하고 더 큰 화면 크기로 작업하는 것이 좋습니다.

또한 등 당신 해야 재정의 높이, 폭,

출처

2016-08-06 19:54:52

시간을내어 주셔서 감사합니다. btw 처음에는 모든 컨테이너 주위를 하나의 컨테이너로 포장했지만 전폭 배경을 사용할 수는 없었습니다. 그 문제를 해결할 방법이 있습니까? – Sam

그럴 경우 모든 것을'.container-fluid' 클래스로 랩핑하고 부트 스트랩의 CSS를 오버라이드하여'.container-fluid'에서 패딩을 제거하면 모든것이 뷰포트의 전체 너비를 차지합니다. 그 후에는 전체 너비 배경을 가질 수 있지만 콘텐츠 (텍스트)는 전체 너비가됩니다. 이 문제를 해결하기 위해 부트 스트랩 열을 사용하여 작은 컨테이너 (예 :'.col-xs-10') 및 [center that column] (http://stackoverflow.com/a/18153551/5228504)로 사용할 수 있습니다. 그렇게하면 일반 .container 클래스와 마찬가지로'.row'와 더 많은 열 클래스를 사용할 수 있습니다. –

입니다. 따라서 브라우저는 .sm, .md 및 .lg 클래스에 대해 구조를 사용하지만 .xs 클래스 (< 768 픽셀)에 대해 수행 할 작업을 알지 못합니다. 그래서 먼저 xs 클래스를 정의 해보십시오. 예를 들어, 당신이 당신의 CSS에 명시적인 높이 규칙을 설정했기 때문에 레이아웃이 응답하지 주된 이유는 모든 사업부

<div class="col-xs-12 col-sm-4"> ... </div>

출처

2016-08-06 19:31:26 kosmastsk

여전히 완전히 엉망입니다. – Sam

[이 내용 확인] (http://codepen.io/kosmastsk/pen/OXBYqA) 더 좋지 않습니까? 먼저 .xs 클래스로 개발하기 시작 하자고 조언합니다. 부트 스트랩을 사용하면이 방법으로 쉽게 할 수 있습니다. – kosmastsk

내 코드가 응답하지 않는 이유는 무엇입니까?

답변

관련 문제