| 제목 | 부트스트랩에서 div style 지정 | ||
|---|---|---|---|
| 글쓴이 | 토끼와거북 | 작성시각 | 2014/03/04 09:38:17 |
|
|
|||
|
부트스트랩 2.3.2 버전 사용하고 있습니다. div 스타일 지정할 때 태그 안에 직접 지정할 때와 css 로 지정할 때 결과값이 다르게 나와서 질문드립니다. ----------------------------------------------------------------------------------------------------------------------------------------------- <style> .left_span{
width:5%;
float:left;
text-align:right;
border: 1px solid blue;
}
.right_span{
width:90%;
float:left;
border: 1px solid red
}
.ex_left_span{
float:left;
width:10%;
text-align:right;
border: 1px solid blue;
}
.ex_right_span{
float:left;
width:85%;
border: 1px solid red;
}
</style>
1번 <div class="container span12" style="border: 1px solid blue;">
<div class="left_span">문 1.</div>
<div class="right_span">다음 설명 중 역사적 시기가 다른 하나는?</div>
<div class="ex_left_span">① </div>
<div class="ex_right_span">황해도 봉산 지탑리에서 나온 탄화된 좁쌀을 통해 농경 흔적을 알 수 있다.</div>
<div class="ex_left_span">② </div>
<div class="ex_right_span">부산 동삼동 패총에서 나온 조개껍데기 가면을 통해 예술 활동 양상을 엿볼 수 있다.</div>
<div class="ex_left_span">③ </div>
<div class="ex_right_span">단양 수양개에서 나온 물고기 조각을 통해 물고기가 잘 잡히기를 기원했음을 알 수 있다.</div>
<div class="ex_left_span">④ </div>
<div class="ex_right_span">평안남도 온천 궁산리에서 나온 뼈바늘을 통해 직조 사실을 추정해 볼 수 있다.</div>
</div>
<br><br>
2번 <div class="container span12" style="border: 1px solid blue;">
<div 1px solid red">문 1. </div>
<div 1px solid red">다음 설명 중 역사적 시기가 다른 하나는?</div>
<div 1px solid red">① </div>
<div 1px solid red">황해도 봉산 지탑리에서 나온 탄화된 좁쌀을 통해 농경 흔적을 알 수 있다.</div>
<div 1px solid red">② </div>
<div 1px solid red">부산 동삼동 패총에서 나온 조개껍데기 가면을 통해 예술 활동 양상을 엿볼 수 있다.</div>
<div 1px solid red">③ </div>
<div 1px solid red">단양 수양개에서 나온 물고기 조각을 통해 물고기가 잘 잡히기를 기원했음을 알 수 있다.</div>
<div 1px solid red">④ </div>
<div 1px solid red">평안남도 온천 궁산리에서 나온 뼈바늘을 통해 직조 사실을 추정해 볼 수 있다.</div>
</div>
-----------------------------------------------------------------------------------------------------------------------------------------------
2번 형식으로 출력되기를 원하는데요. 1번처럼 할 경우에 div 앞쪽에 여백이 생깁니다. 부트스트랩을 제거하면 동일한 결과값을 출력하는 것으로 보아 부트스트랩의 속성 때문인 듯 한데요. div style 을 외부에서 지정해 주어야 하는 상황인데 2번처럼 보여줄 수는 없을까요? |
|||
| 다음글 | 이미지 엑박 질문입니다. (5) | ||
| 이전글 | URL 파라미터 관련 질문입니다. (2) | ||
|
수야디벨
/
2014/03/04 10:30:13 /
추천
0
|
|
토끼와거북
/
2014/03/04 10:45:35 /
추천
0
margin:0; 이것을 넣으니까 1번, 2번 모두 동일한 값을 출력하네요.
한참 헤매었는데 덕분에 쉽게 해결책을 찾았습니다. 감사합니다.^^ |
엘리먼트 선택 툴을 이용해서 해당 div를 선택하면 원인을 파악하실 수 있습니다.
엘리먼트 툴을 선택했을때 파란 부분은 실질적인 크기이고 , 연두색 부분은 외부 css요인에 의해서
영향을 받은 부분입니다.
위 질문 같은 경우도 1번의 경우에 엘리멘트 선택 툴을 이용하여 영역을 살펴 보면
연두색 부분이 있을겁니다.
그게 왜 있는지 파악하는게 중요해요 ,
개발자 도구 오른쪽에 해당 부분의 css가 나오니 체크해 보시는게 도움이 될 듯 합니다.
만약 어떤 css때문이라는 원인이 파악이 된다면 ,
해당 태그에 직접 style을 맥임으로써 ,(또는 부트스트랩 이후에 css를 쓰던지)
앞에 걸린 부트스트랩에 걸린 css를 지우거나 다른거로 대체 할 수 있습니다.