CSS 격자를 사용하여 그리드 주위에 테두리가 있습니다

divitter를 포함하는 사이트에 테두리 및 패딩을 적용하는 가장 좋은 방법은 twitter-bootstrap과 같은 그리드 시스템을 사용하여 사이트로 랩합니까?CSS 격자를 사용하여 그리드 주위에 테두리가 있습니다

예를 들어 부트 스트랩을 사용합니다. 격자는 중첩 된 컨테이너와 행에 종속됩니다. 첫 번째 컨테이너에 테두리와 패딩을 적용하면 수식과 포함 된 div 스택이 세로로 변경되어 격자가 끊어집니다.

첫 번째 컨테이너를 별도의 랩 div에 배치하고 & 패딩을 랩 div에 적용하면 포함 된 div가 컨테이너에서 벗어납니다.

따라서 마크 업의 예이다

<div class=' main'> 
    <div class='container'> 
     <div class='row'> 
     <div class='span12'>    
      <h1>Demo</h1>  
      <div class='row'> 
       <section class='span8'> 
       blah blah 
       </section> 
       <aside class='row'> 
       links n stuff 
       </aside>  
      </div> 
     </div> 
     </div> 
</div>

난 메인 래퍼 20 픽셀 패딩 1 픽셀 테두리를 적용 할. 부트 스트랩은 px의 범위를 계산하므로 파기됩니다.

출처

2012-09-07 Will

답변을 얻으려면 문제가있는 실제 코드를 제공하는 것이 가장 좋습니다. 나를위한 빠른 시각 장애 응답은 당신의 두 번째 아이디어가 아마 작동 할 것이고, 당신은 단지 당신이 배치하는'floats' 또는'포지셔닝 된'아이들과 싸우기 위해 당신의 랩핑 요소에 올바른 CSS를 가지고 있는지 확인해야 할 것입니다. float의 경우 보통 'float : left' 또는'overflow : hidden'을 사용할 수 있습니다. 위치가 지정된 요소의 경우 'position : relative'를 사용할 수 있습니다. – Pebbl

알았어, 일부 코드로 질문을 편집 해 주셔서 고마워요. – Will

그래서 우리는 너비를 원하지 않으므로 % 너비가 필요합니다. 다른 프레임 워크에서는 %를 사용합니다. 오. 유체는 사용 부트 스트랩 %의 다음

<div class=' main'> 
<div class='container-fluid'> 
    <div class='row-fluid'> 
    <div class='span12'>    
     <h1>Demo</h1>  
     <div class='row-fluid'> 
      <section class='span8'> 
      blah blah 
      </section> 
      <aside class='span3'> 
      links n stuff 
      </aside>  
     </div> 
    </div> 
    </div> 
</div>

및 미디어를 사용하여 컨테이너의 폭을 해결

이

.main{ 
    width:1210px; 
    margin:20px auto; 

    border-radius:3px; 
    border:1px solid #eee; 
    box-shadow: 2px 2px 8px rgba(6,6,6,0.5); 
} 


@media (max-width: 1210px) { 
.main{ 
    width:80%; 
    } 
}

을 조회하고 부트 스트랩 그리드 주위에 상자를 이잖아. 예.

출처

2012-09-07 07:45:08 Will

CSS 격자를 사용하여 그리드 주위에 테두리가 있습니다

답변

관련 문제