내 부트 스트랩 사이트에

Question

(반응) 부트 스트랩과 함께 쌍으로 elementes을 정리, 나는 행 (바탕 화면보기)에서 6 개 사진을 가지고 그룹 쌍에 그 사진에 - 중간에 중심 :

|  Ø Ø   | 
|  Ø Ø   | 
|  Ø Ø   | 

대신, 그 결과는 다음과 같이 항상 :

|Ø     | 
|Ø     | 
|Ø     | 
|Ø     | 
|Ø     | 
|Ø     | 

할 방법 항목을 올바르게 정렬하기 위해 수업을 수정해야합니까?

UPDATE I는 3 쌍으로 그룹화 된 요소. 데스크톱 모드로 전환하면 태블릿이나 휴대 전화로 사이트를 볼 때를 제외하고는 모든 것이 정상입니다.

<div class="row"> 
    <div class="span4"> 
     <div class="row-fluid text"> 
      <div class="span6"> 
      <p><img src="img/icon.png"></p> 
      </div> 
      <div class="span6"> 
      <p><img src="img/icon.png"></p> 
      </div> 
     </div> 
    </div> 
     <div class="span4"> 
     <div class="row-fluid"> 
      <div class="span6"> 
      <p><img src="img/icon.png"></p> 
      </div> 
      <div class="span6"> 
      <p><img src="img/icon.png"></p> 
      </div> 
     </div> 
    </div> <div class="span4"> 
     <div class="row-fluid"> 
      <div class="span6"> 
      <p><img src="img/icon.png"></p> 
      </div> 
      <div class="span6"> 
      <p><img src="img/icon.png"></p> 
      </div> 
     </div> 
    </div> 
</div> 

감사 :

태블릿

| Ø Ø Ø Ø   | 
| Ø Ø    | 

전화

| Ø Ø    | 
| Ø Ø    | 
| Ø Ø    | 

이 코드입니다!

Answer 1

내가

<div class="span-1"><img src="http://placehold.it/300x100" alt=""></div> 
<div class="span-2"><img src="http://placehold.it/300x100" alt=""></div> 
<div class="span-3"><img src="http://placehold.it/300x100" alt=""></div> 
<div class="span-4"><img src="http://placehold.it/300x100" alt=""></div> 
<div class="span-5"><img src="http://placehold.it/300x100" alt=""></div> 
<div class="span-6"><img src="http://placehold.it/300x100" alt=""></div> 

위가 당신

CSS의

작은 비트

div[class^="span-"] { 
    width:49%; // Each image parent 49% (1% left for margin) 
    float:left; // Float them all left so we can fit 2 on each line 
    margin:0 .5%; // Little bit of margin for visibility 
} 

div[class^="span-"]:nth-child(odd){ 
    text-align:right; // For every odd element align it right (for even default is left anyway) 
} 

에 시뮬 레이아웃입니다 Demo

을 만들어이 빠른 바이올린에서보세요

이

을하고 그게 전부입니다. 당신은 부트 스트랩에서 약간의 갈등을 경험할 수 있지만, 너무 많이 겹쳐 질 수는 없기 때문에 볼 수 있어야합니다.

그리고 그건 그렇고 당신도 부트 스트랩에 너무

Answer 2

bootstrap-responsive.css 파일에서 각 해상도에 해당 사진을 지정해야합니다. 그들이 원하는대로 나타나기 위해서.

부트 스트랩과 함께 제공되는 반응 형 스타일 시트를 포함 시켰습니까? "span12", "span2"등과 같은 적절한 클래스를 사용하고 있습니까?

Answer 3

문제는 부트 스트랩 반응 CSS에서 모든 스팬이 100이 될 것을 CSS을 사용해야합니다, 단지 클래스와 웹 사이트를 구축하지 못할 뷰포트가 태블릿 또는 휴대 전화로 전환되면 너비 (%).span6 클래스를 사용하는 대신 새로운 클래스를 만들고 너비를 원하는 여백에 따라 50 %에 가까운 값으로 설정하고 float을 왼쪽으로 설정해야합니다.