2012-06-07 5 views
1

부트 스트랩의 그리드 시스템에 대한 질문이 있습니다. 나는 위대한 일을하는 것처럼 보이지만 "상자들"사이에는 여백이 없습니다. 예를 들면 다음과 같습니다.Twitter의 부트 스트랩 여백

<div class="column"> 

    <div class="span11"> 

    </div> 

    <div class="span11"> 

    </div> 

</div> 

위대한 작품입니다. 그러나 그 사이에는 공간이 없습니다. 그래서 나는 "id"를 할당하고 CSS 코드를 사용하여 직접 편집합니까? 이것이 올바른 방법일까요? 예를 들면 : 테두리, 색상 등

<div class="column"> 

    <div id="box_1" class="span11"> 

    </div> 

    <div id="box_2" class="span11"> 

    </div> 

</div> 

한 가지 더, 나는 동일한 기능을 수행합니까?

감사

답변

1

에는 트위터 부트 스트랩에 .column하지만이 없다 첫 번째 셀에만

새 CREAT 하단/상단 여백을 원하는 경우에 당신이 왼쪽/오른쪽 여백 사용을 offset1

와 span10를 원하는 경우

.row와 같은 클래스를 적용하십시오.

테두리 및 색상은 일반 및 고유의 클래스를 특정 용도로 사용합니다.

당신이 http://jsfiddle.net/baptme/EHutn/

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<link href="css/bootstrap.css" type="text/css" rel="stylesheet"> 
<style> 
.show-grid { 
margin-bottom: 20px; 
margin-top: 10px; 
} 
.show-grid [class*="span"] { 
background-color: #EEEEEE; 
border-radius: 3px 3px 3px 3px; 
line-height: 30px; 
min-height: 30px; 
text-align: center; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="row show-grid"> 
<div class="span10 offset1"> 
<p>bla bla bla</p> 
</div> 
</div> 
<div class="row show-grid"> 
<div class="span10 offset1"> 
<p>bla bla bla</p> 
</div> 
</div> 
</div> 
</body> 
</html> 
처럼 jsFiddle에 모형을 만들 수 있습니다

관련 문제