col-md- *

Question

을 사용하여 bootstrap 3.0에서 한 행에 5 개의 이미지를 추가하는 방법 boot -rap 3.0에서 col-md- *를 사용하여 틈없이 5 개의 이미지를 추가하고 싶습니다. 부트 스트랩에는 12 개의 그리드가 있습니다. 하지만 나는 단지 5 개의 이미지 만 넣는다. 그것을하는 방법 ..?

Answer 1

당신은 방금 bootstrap의 col-md- *로 당신 자신의 질문에 답했습니다. 아무런 격차없이 그것을 할 수는 없습니다. 12 개의 열이 있고 5 개의 이미지가 표시되기를 원하면 2 개의 열이 남습니다.

6 개의 이미지를 넣거나 (원하지 않는 것 같아요), 또는 col-md-2 CSS 규칙을 너비 20 % (권장하지 않음)로 변경하거나 나만의 CSS 규칙을 만들면됩니다. float : left, width : 20 % (필자는이 방법을 권하고 싶습니다.) 그러나 화면의 너비에 따라 다른 CSS 규칙을 사용합니다 (필요에 따라 다름).

Answer 2

처음으로 죄송합니다. 게시 링크 및 자습서가 허용되지 않는다는 것을 알지 못했습니다. 나는 이제 너의 문제를 좀 해결했다. 5 열에 대해 눈금을 만들었습니다. 800px에서 너비가 100 %로 축소됩니다 (쉽게 변경할 수 있음).

.grid-container{ 
 
    width: 100%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    box-sizing: border-box; 
 
} 
 
.grid-row { 
 
    margin-left: inherit; 
 
    margin-right: inherit; 
 
} 
 
/*-- our cleafix hack -- */ 
 
.grid-row:before, 
 
.grid-row:after { 
 
    content:""; 
 
    display: table ; 
 
    clear:both; 
 
} 
 

 

 
.col-1{ width: 20%; 
 
    float: left; 
 
    padding: 5px; 
 
} 
 
.col-offset-1 { 
 
    margin-left: 20%; 
 
    float: left; 
 
    padding: 5px; 
 

 
} 
 
.col-offset-2 { 
 
    margin-left: 40%; 
 
    float: left; 
 
    padding: 5px; 
 
} 
 
.col-offset-3 { 
 
    margin-left: 60%; 
 
    float: left; 
 
    padding: 5px; 
 
} 
 
.col-offset-4 { 
 
    margin-left: 80%; 
 
    float: left; 
 
    padding: 5px; 
 
} 
 

 

 
@media all and (max-width:800px){ 
 
    .col-1 { width: 80%; 
 
    margin-left: 10%; 
 
    margin-right: auto; 
 
     padding: 15px; 
 
    } 
 
    .grid-container { 
 
     width: 100%; 
 
    } 
 
    img { 
 
     display: block; 
 
     margin:0 auto; 
 
    } 
 

 
} 
 
img { 
 
    display: block; 
 
    margin:0 auto; 
 
}

<div class="grid-container"> 
 
    <div class="grid-row"> 
 
     <div class="col-offset-2 col-1"><img src="http://placehold.it/600x150" alt="" class="img-responsive"></div> 
 
     <div class="col-1"><img src="http://placehold.it/600x150" alt="" class="img-responsive"></div> 
 

 
    </div> 
 
</div>

즉 당신이 찾고있는 무슨인지 정말 모르겠다.