모바일메뉴

EOND

검색
마이페이지
홈페이지제작솔루션 CMS WEB 툴팁 위키 지식인 CMS 포럼 경매모듈 질문•답변
HTML5/CSS3
글쓰기
-
가
+
[부트스트랩] 부트스트랩에서 margin-top 은 어떻게 표현할까?
이온디
2016.06.05 08:33
560
0
https://eond.com/376361
object(HotopayModel)#884 (23) { ["error"]=> int(0) ["message"]=> string(7) "success" ["variables"]=> array(0) { } ["httpStatusCode"]=> int(200) ["module"]=> string(7) "hotopay" ["module_info"]=> NULL ["origin_module_info"]=> NULL ["module_config"]=> NULL ["module_path"]=> string(52) "/home/eond/web/eond.com/public_html/modules/hotopay/" ["xml_info"]=> NULL ["module_srl"]=> NULL ["mid"]=> NULL ["act"]=> NULL ["template_path"]=> NULL ["template_file"]=> NULL ["layout_path"]=> NULL ["layout_file"]=> NULL ["edited_layout_file"]=> NULL ["stop_proc"]=> bool(false) ["user"]=> object(Rhymix\Framework\Helpers\SessionHelper)#883 (20) { ["member_srl"]=> int(0) ["user_id"]=> NULL ["user_name"]=> NULL ["nick_name"]=> NULL ["email_address"]=> NULL ["phone_number"]=> NULL ["homepage"]=> NULL ["blog"]=> NULL ["birthday"]=> NULL ["denied"]=> NULL ["status"]=> NULL ["is_admin"]=> string(1) "N" ["is_site_admin"]=> NULL ["profile_image"]=> NULL ["image_name"]=> NULL ["image_mark"]=> NULL ["signature"]=> NULL ["description"]=> NULL ["group_list"]=> array(0) { } ["menu_list"]=> array(0) { } } ["request"]=> object(Rhymix\Framework\Request)#10 (13) { ["method"]=> string(3) "GET" ["compat_method"]=> string(3) "GET" ["url"]=> string(28) "coding/376361/comment/465121" ["hostname"]=> string(8) "eond.com" ["domain"]=> NULL ["protocol"]=> string(5) "https" ["callback_function"]=> string(0) "" ["_route_status":protected]=> int(200) ["_route_options":protected]=> object(stdClass)#11 (5) { ["cache_control"]=> bool(true) ["check_csrf"]=> bool(true) ["is_forwarded"]=> bool(false) ["is_indexable"]=> bool(true) ["enable_session"]=> bool(true) } ["module"]=> string(5) "board" ["mid"]=> string(6) "coding" ["act"]=> string(16) "dispBoardContent" ["args"]=> array(5) { ["category"]=> string(6) "327266" ["document_srl"]=> string(6) "376361" ["comment_srl"]=> string(6) "465121" ["mid"]=> string(6) "coding" ["act"]=> string(16) "dispBoardContent" } } ["ajaxRequestMethod"]=> array(2) { [0]=> string(6) "XMLRPC" [1]=> string(4) "JSON" } ["gzhandler_enable"]=> bool(true) } 

<div class="row">
   <div class="col-xs-12 col-md-12">
      <div class="alert alert-success" role="alert">
         회원님의 아이디는 <span class="findid"></span>입니다.
      </div>
   </div>
</div>

예를 들어, 위와 같이 row 와 col-md-xx 를 같이 사용한 div 박스가 두개 연달아 나타날 경우,

아래 div 박스를 상단 div 박스와 10픽셀 간격을 두려고 한다. 과연 이 margin-top (혹은 padding-top, margin-bottom 어쨌든) 을 어떻게 나타내줘야 할까요?

 

bootstrap에는 기본적으로 이런 margin-top 간격을 표시하는 클래스는 없는 것 같습니다.

이 vertical spacing 을 표현하는 방법은 외국에서도 이슈가 되는 것 같은데요 (https://github.com/twbs/bootstrap/issues/4286)

아래 url 에서는 다양한 방법으로 개인적으로 임의 추가해서 사용하고 있네요.

1) 

.top-buffer { margin-top:20px; }

2) top10

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

3) margin-bottom-xs

.margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
.margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
.margin-bottom-md {margin-bottom: @line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}

4) voffset**

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

5) margin-top-10

.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-15 { margin-top: 1.5em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-25 { margin-top: 2.5em; }
.margin-top-30 { margin-top: 3.0em; }

음.. 저는 개인적으로 4)번째 방법이 마음에 드네요. 기존 부트스트랩의 col-md-offset-xx 개념을 vertical 접두어를 붙여 voffset**이라고 표현한 방법이 센스있는 것 같습니다.

 

ps. 개인적으로 저는 대충 이렇게 사용했었습니다. ;;

.mb40{margin-bottom:40px;}
.mr80{margin-right:90px;}
.pv40{padding:40px 0;}
.padding0{padding:0;}
0
0

라이믹스는 이온디와 함께

목록
글쓰기 신고 스크랩

댓글 0

댓글작성칸으로
HTML5/CSS3
-
가
+
전체 웹표준 웹접근성 부트스트랩 반응형 웹 UI HTML5 jQuery Script CSS Meta Table Form 미분류 PHP Flash CGI DIV 웹폰트 크로스브라우징 위지윅에디터 svg 프레임워크 map swiperjs
1
글쓰기
메뉴닫기
profile
로그인 해주세요.
자유게시판 글쓰기 저장함 쪽지
전체글보기 인기글 인기멤버 태그

전체 게시판

닫기

마이페이지

로그인을 해주세요

네이버로 로그인
ID/PW찾기 회원가입