object(HotopayModel)#900 (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)#899 (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/465133"
["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) {
["page"]=>
int(3)
["document_srl"]=>
string(6) "376361"
["comment_srl"]=>
string(6) "465133"
["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
댓글작성칸으로