css 문의
본문
http://dreams.phps.kr/
메인 슬라이딩 이미지 아래 기본은 3개의 배너로 되어 있는데요
4개로 했더니 한줄 내려가네요..한줄로 모두 보이게 하려면 css를 어떻게 수정해야 할까요??
답변 8
<div class="container">
이 태그 부분( 아까 설명 드린 부분 부모 태그 입니다.) 변경 하셔야 해요
bootstrap.min.css 소스중ㅇ
@media (min-width: 1200px) .contaner{width:1170px}
-->
@media (min-width: 1200px) .contaner{width:1560px}
으로 변경하시면 되요
그리고 아까
col-sm-4 클래스도
col-sm-3 로 변경하시구요
그런데 container 이 클래스명이 다른곳에 같은 명으로 쓰는 경우가 아마 잇어서 오류날텐데 클래스명을 따로 변경하셔서 사용하는게 좋을듯해요
container -> container2 이런식으로요
설정되어있는 width 값 늘려야 할것같은데 소스를 봐야 알겟같네요; 그 부분 실행하는 스크립트부분이요
해당파일의 소스에요
<?php if (!defined('_GNUBOARD_')) exit; ?>
<style>
/* 섹션 타이틀 */
.ebcontents-sect02 {margin-bottom:60px}
.ebcontents-sect02 .section-title {max-width:1280px;margin:0 auto;padding:60px 0 40px}
.ebcontents-sect02 .section-title:after {content:"";display:block;clear:both}
.ebcontents-sect02 .section-title h3 {float:left;width:40%;margin:0;font-size:40px;line-height:45px;color:#1D4252;font-weight:200}
.ebcontents-sect02 .section-title h3 strong {display:block}
.ebcontents-sect02 .section-title p {float:left;width:60%;margin:0;font-size:18px;line-height:30px;color:#707070;padding:0 30px;border-left:1px solid #ddd;border-right:1px solid #ddd}
/* 섹션 아이템 */
.ebcontents-sect02 .section-item {border-top:5px solid #4fb0df}
.ebcontents-sect02 .section-item a {display:block}
.ebcontents-sect02 .section-item img {max-width:100%;height:auto}
.ebcontents-sect02 .section-content {margin-top:20px}
.ebcontents-sect02 .section-content h4 {font-size:18px;font-weight:bold}
.ebcontents-sect02 .section-content p {margin-bottom:15px;color:#707070}
/* 버튼 */
.ebcontents-sect02 .section-content .btn-more a {display:inline-block;padding:5px 20px;border:2px solid #ccc;color:#707070;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}
.ebcontents-sect02 .section-content .btn-more a:hover {background:#4fb0df;border-color:#4fb0df;color:#fff}
@media (max-width:1199px){
.ebcontents-sect02 .section-title {max-width:100%}
.ebcontents-sect02 .section-title h3 {font-size:35px}
.ebcontents-sect02 .section-title p {font-size:16px}
}
@media (max-width:991px){
.ebcontents-sect02 .section-title h3, .ebcontents-sect02 .section-title p {float:none;width:100%}
.ebcontents-sect02 .section-title h3 {padding-bottom:10px;margin-bottom:10px;font-size:24px;line-height:34px;border-bottom:1px solid #ddd}
.ebcontents-sect02 .section-title h3 span {display:inline}
.ebcontents-sect02 .section-title p {padding:0;font-size:14px;line-height:24px;border:0}
}
@media (max-width:767px){
.ebcontents-sect02 .col-sm-4 {margin-bottom:30px}
.ebcontents-sect02 .col-sm-4:last-child {margin-bottom:0}
}
.ebcontents {position:relative}
.ebcontents-032-section01-adm-btn {position:absolute;bottom:0;left:0;width:100%;text-align:center;z-index:1}
</style>
<div class="ebcontents ebcontents-sect02">
<div class="container">
<div class="section-title">
<h3>{ecinfo.ec_subject}</h3>
<p>{ecinfo.ec_text}</p>
</div>
<div class="row">
<!--{@ contents}-->
<div class="col-sm-4">
<div class="section-item">
<div class="section-image">
<!--{? .href_1}-->
<a href="{.href_1}" target="{.target_1}">
<!--{/}-->
<!--{@ image}-->
<img src="{.src_1}">
<!--{/}-->
<!--{? .href_1}-->
</a>
<!--{/}-->
</div>
<div class="section-content">
<!--{? .ci_title}-->
<h4>{.ci_title}</h4>
<!--{/}-->
<!--{? .ci_text}-->
<p>{.ci_text}</p>
<!--{/}-->
<!--{? .href_1}-->
<div class="btn-more"><a href="{.href_1}" target="{.target_1}">자세히 보기</a></div>
<!--{/}-->
</div>
</div>
</div>
<!--{:}-->
<div class="col-sm-4">
<div class="section-item">
<div class="section-image">
<a href="#">
<img src="./image/contents_01.jpg">
</a>
</div>
<div class="section-content">
<h4>빠르고 편리한 교통 환경</h4>
<p>주거 공간에 품격을 높이고 살기 좋은 환경을 원하는 당신께 최상의 품질을 약속하는 이윰이 그 방법을 제시해 드립니다.</p>
<div class="btn-more"><a href="">자세히 보기</a></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="section-item">
<div class="section-image">
<a href="#">
<img src="./image/contents_02.jpg">
</a>
</div>
<div class="section-content">
<h4>쇼핑몰과 편의시설</h4>
<p>주거 공간에 품격을 높이고 살기 좋은 환경을 원하는 당신께 최상의 품질을 약속하는 이윰이 그 방법을 제시해 드립니다.</p>
<div class="btn-more"><a href="">자세히 보기</a></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="section-item">
<div class="section-image">
<a href="#">
<img src="./image/contents_03.jpg">
</a>
</div>
<div class="section-content">
<h4>대표 랜드마크 조성</h4>
<p>주거 공간에 품격을 높이고 살기 좋은 환경을 원하는 당신께 최상의 품질을 약속하는 이윰이 그 방법을 제시해 드립니다.</p>
<div class="btn-more"><a href="">자세히 보기</a></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="section-item">
<div class="section-image">
<a href="#">
<img src="./image/contents_03.jpg">
</a>
</div>
<div class="section-content">
<h4>대표 랜드마크 조성</h4>
<p>주거 공간에 품격을 높이고 살기 좋은 환경을 원하는 당신께 최상의 품질을 약속하는 이윰이 그 방법을 제시해 드립니다.</p>
<div class="btn-more"><a href="">자세히 보기</a></div>
</div>
</div>
</div>
<!--{/}-->
</div>
</div>
<!--{? is_admin == 'super'}-->
<div class="ebcontents-032-section01-adm-btn text-center hidden-xs">
<a href="{C.EYOOM_ADMIN_URL}/?dir=theme&pid=ebcontents_form&thema={theme}&ec_code={code}&w=u" target="_blank" class="btn-e btn-e-dark"><i class="fa fa-cog"></i> EB컨텐츠 설정하기</a>
<button type="button" class="btn-e btn-e-dark popovers" data-container="body" data-toggle="popover" data-placement="top" data-html="true" data-content="
<span class='font-size-11'>
<strong class='color-indigo'>좌측 [EB컨텐츠 설정하기 버튼] 클릭 후 아래 설명 참고</strong><br>
<div class='margin-hr-5'></div>
<span class='color-indigo'>[설정정보]</span><br>
1. 컨텐츠 마스터 제목 : Salubrious Primium...<br>
2. 스킨선택 : busi0032_sect02<br>
3. 컨텐츠 마스터 설명글 : 주거 공간에 품격을..<br>
4. 컨텐츠 아이템에서 사용할 링크수 : 1개<br>
5. 컨텐츠 아이템에서 사용할 이미지수 : 1개<br>
<span class='color-indigo'>[EB 컨텐츠 - 아이템 관리]</span><br>
1. EB컨텐츠 아이템 추가 클릭<br>
2. 대표 타이틀 입력<br>
3. 섦명문구틀 입력<br>
4. 연결주소 [링크] #1 입력 (자세히 보기 버튼 출력)<br>
5. 이미지 #1<br>
<div class='margin-hr-5'></div>
- 이미지 비율 900x900 픽셀 이미지 사용<br>
- EB컨텐츠 아이템 3개에 맞춰 디자인
</span>
"><i class="fa fa-question-circle"></i></button>
</div>
<!--{/}-->
</div>
신고가 접수되어 자동으로 블라인드 된 글입니다.
원글을 보시려면 를 클릭하세요.
좋아요
신고가 접수되어 자동으로 블라인드 된 글입니다.
원글을 보시려면 를 클릭하세요.
좋아요
아 부트스트랩이시네요
보니깐
<!--{@ contents}-->
<div class="col-sm-4">
<div class="section-item">
<div class="section-image">
<!--{? .href_1}-->
<a href="{.href_1}" target="{.target_1}">
<!--{/}-->
<!--{@ image}-->
<img src="{.src_1}">
<!--{/}-->
<!--{? .href_1}-->
</a>
<!--{/}-->
</div>
<div class="section-content">
<!--{? .ci_title}-->
<h4>{.ci_title}</h4>
<!--{/}-->
<!--{? .ci_text}-->
<p>{.ci_text}</p>
<!--{/}-->
<!--{? .href_1}-->
<div class="btn-more"><a href="{.href_1}" target="{.target_1}">자세히 보기</a></div>
<!--{/}-->
</div>
</div>
</div>
<!--{:}-->
그 배너 영역에
<div class="col-sm-4"> 이렇게 되어있는걸 클래스명을 변경하세요
<div class="col-sm-4">
----->>
<div class="col-sm-3">
col-sm-3 클래스로 변경하시면 됩니다
css에서 width값을 수정하시면됩니다.