css 문의

css 문의

QA

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 이런식으로요

해당파일의 소스에요

<?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 클래스로 변경하시면 됩니다

thumb-3064832690_1528782110.791_730x395.png

이렇게 말씀하시는건가요?

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT