부트스트랩 레이아웃 문제

[김건우]

 <div class="dashBoard">
      <h2 class="mb-3">Dashboard</h2>
      <div class="row">
          <div class="col-3 box-design"></div>
          <div class="col-3 box-design"></div>
          <div class="col-3 box-design"></div>
          <div class="col-3 box-design"></div>
      </div>
  </div>

현재 코드가 이러한데 레이아웃이 

ㅁ ㅁ ㅁ 

ㅁ 

이렇게 두줄로 잡힙니다. 

col-3 가 4개니까 한줄에 4개가 모두 들어가야 될것 같은데 안들어가네요 

 

 

box_design에 대한 css는 아래와 같습니다.

.box-design {
    border: 1px solid lightgray;
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    box-sizing: border-box;
}

div {
box-sizeing : border-box;
} 

margin을 0 으로 주면 정상적으로 4개가 한줄에 보이는데 margin을 사용하고싶어서요
대체 뭐가 문제인거죠 ? 

 

 

[김건우]

잠깐, col-3 자체에 마진을 주는게 아니라 그안에 다시 영역을 만들고 마진을 주면 되지 않을까요. 

[김건우]

와 되네요 감사합니다. 

[codingapple]

무야호

[글쓴이]

글