트위터 부트 스트랩-테두리
방금 Twitter Bootstrap을 사용하기 시작했는데 부모 요소에 테두리를 가장 잘 추가하는 방법에 대한 질문이 있습니까?
예를 들어
<div class="main-area span12">
<div class="row">
<div class="span9">
//Maybe some description text
</div>
<div class="span3">
//Maybe a button or something
</div>
</div>
</div>
이렇게 테두리를 적용하면 :
.main-area {
border: 1px solid #ccc;
}
그리드 시스템은 span3경계의 폭이 추가 되었기 때문에 다음 행으로 중단되고 킥 다운됩니다 ....... 이와 같이 부모에게 경계 또는 패딩과 같은 것을 추가 할 수있는 좋은 방법 <div>이 있습니까?
GitHub 에서 Twitter의 자체 container-app.html 데모 를 보면 그리드에 테두리를 사용하는 방법에 대한 아이디어를 얻을 수 있습니다.
예를 들어, 다음은 940 픽셀 너비의 16 열 그리드 시스템에 대한 빌딩 블록의 추출 된 부분입니다.
.row {
zoom: 1;
margin-left: -20px;
}
.row > [class*="span"] {
display: inline;
float: left;
margin-left: 20px;
}
.span4 {
width: 220px;
}
특정 요소에 테두리를 허용하기 위해 페이지에 포함 된 CSS를 추가하여 테두리를 고려할 수있는 충분한 양만큼 일치하는 클래스를 줄였습니다.
예를 들어 사이드 바의 왼쪽 테두리를 허용하기 위해이 CSS를 <head>메인 <link href="../bootstrap.css" rel="stylesheet">.
.content .span4 {
margin-left: 0;
padding-left: 19px;
border-left: 1px solid #eee;
}
새 왼쪽 테두리를 추가 할 수 있도록 축소 padding-left된 1px것을 볼 수 있습니다. 이 규칙은 소스 순서에서 나중에 나타나기 때문에 이전 또는 외부 선언을 재정의합니다.
나는 이것이 바로 가장 강력한없는 주장 것 또는 우아한 접근하지만, 가장 기본적인 예를 나타낸다.
내가 오늘 밤에 실행 한 또 다른 솔루션은 내 필요에 맞았는데 box-sizing속성 을 추가하는 것이 었습니다 .
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
이러한 속성은 테두리가 상자 모델의 너비와 높이의 일부가되게하고 문제도 해결합니다.
에 따르면 caniuse.com»상자 크기 조정 , box-sizingIE8 +에서 지원됩니다.
LESS 또는 Sass를 사용하는 경우이를위한 부트 스트랩 믹스 인이 있습니다.
적게:
.box-sizing(border-box);
Sass :
@include box-sizing(border-box);
참고 URL : https://stackoverflow.com/questions/8793876/twitter-bootstrap-borders
'code' 카테고리의 다른 글
| 온라인 저장소에서 체크 아웃 할 때 SVN 오류 (200 OK) (0) | 2020.11.05 |
|---|---|
| datetime 또는 timestamp를 사용하는 경우 (0) | 2020.11.05 |
| Go에서 중첩 된 함수 선언 (함수 내부 함수)을 허용하지 않는 이유는 무엇입니까? (0) | 2020.11.05 |
| objdump를 사용하여 하나의 단일 함수를 분해하는 방법은 무엇입니까? (0) | 2020.11.05 |
| C ++ 14의 Lambda-Over-Lambda (0) | 2020.11.05 |