div 레이아웃 간격수정

div 레이아웃 간격수정

QA

div 레이아웃 간격수정

본문

안녕하세요 아주 기초적인 질문이라 죄송한데요 여기저기 서치를 해봐도 이해가 잘 안가서 질문드림니다.

782ad99e38ce6546e62977d9ef86960f_1426304356_968.jpg
아래와 같이 했습니다.

 

<div class="row">
  <div class="col-md-3">
    <div class="ot">
      <div style="margin:1px; border:1px solid #B23636;">
        <div style="padding:10px; border:4px solid #f2f2f2;"><i class="fa fa-tags fa-lg"></i>   BOARD 1<br />
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="ot">
      <div style="margin:1px; border:1px solid #B23636;">
        <div style="padding:10px; border:4px solid #f2f2f2;"><i class="fa fa-tags fa-lg"></i>   BOARD 2<br />
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="ot">
      <div style="margin:1px; border:1px solid #B23636;">
        <div style="padding:10px; border:4px solid #f2f2f2;"><i class="fa fa-tags fa-lg"></i>   BOARD 3<br />
          스탠포드 대학 탐방 ($50/1인)/베이크루즈 유람선 ($28/1인)
        </div>
      </div>
    </div>
  </div>
</div>
<p></p>
 <div class="row">
  <div class="col-md-3">
    <div class="ot">
      <div style="margin:1px; border:1px solid #B23636;">
        <div style="padding:10px; border:4px solid #f2f2f2;"><i class="fa fa-tags fa-lg"></i>   BOARD 4<br />
          스탠포드 대학 탐방 ($50/1인)/베이크루즈 유람선 ($28/1인)
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="ot">
      <div style="margin:1px; border:1px solid #B23636;">
        <div style="padding:10px; border:4px solid #f2f2f2;"><i class="fa fa-tags fa-lg"></i>   BOARD 5<br />
          스탠포드 대학 탐방 ($50/1인)/베이크루즈 유람선 ($28/1인)
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="ot">
      <div style="margin:1px; border:1px solid #B23636;">
        <div style="padding:10px; border:4px solid #f2f2f2;"><i class="fa fa-tags fa-lg"></i>   BOARD 6<br />
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="ot">
      <div style="margin:1px; border:1px solid #B23636;">
        <div style="padding:10px; border:4px solid #f2f2f2;"><i class="fa fa-tags fa-lg"></i>   BOARD 7<br />
          스탠포드 대학 탐방 ($50/1인)/베이크루즈 유람선 ($28/1인)
        </div>
      </div>
    </div>
  </div>
</div>


http://navahotour.com/bbs/board.php?bo_table=comm&wr_id=2  페이지 이고요

빌더는 APMS 를 사용했습니다.

그리고 페이지는 공명과맥님이 올려주신 한페이지짜리 게시판 스킨을 사용했습니다.


감사합니다.

이 질문에 댓글 쓰기 :

답변 1

bootstrap.min.css 에 .col-md-3 에 적용되는 부분이군요.

padding-left와 padding-right가 15px로 설정되있습니다.

해당파일에서 수정하면 예상치 못한 다른 부분도 틀어질 우려가 있으니 이런 경우엔 차라리 게시판스킨의 css에서 수정해주시는게 좋겠습니다.

skin/board/html/style.css 에서 적당한 위치에

#bo_v_con .col-md-3, #bo_v_con .col-md-6 {padding-left:15px; padding-right:15px;}

이런식으로 추가하시면 될듯합니다. (픽셀 사이즈는 원하시는대로 수정하시면 됩니다.)

행여나 3,6 이외에도 쓰일거 같다 싶으면 1부터 10까지 다 명시해주는게 좋겠죠. 

답변을 작성하시기 전에 로그인 해주세요.
전체 6
QA 내용 검색

회원로그인

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