부트 스트랩 미리보기 이미지가 제대로 스태킹되지 않음

부트 스트랩의 내 축소판 이미지의 높이가 다르기 때문에 이미지가 올바르게 스택되지 않을 수 있습니다 (스크린 샷과 바이올린 참조). 나는 그들에게 최소 높이를 포함시켜야한다고 생각하지만, 나는 그것을 작동시킬 수 없다. 누구든지 손을 빌려 줄 수 있니?부트 스트랩 미리보기 이미지가 제대로 스태킹되지 않음

<body> 
    <div class="container-fluid"> 
     <div class="hidden-phone"> 
     <a href="newBook.php"> 
     <button class="btn btn-large btn-primary" style="float:right; margin-top:30px;" type="button">Add Book</button> 
     </a> 
     </div> 
     <div class="row-fluid"> 
     <div class="span12 well"> 

     <div class="row-fluid"> 
      <ul class="thumbnails"> 

      <li class="span4"> 
       <div class="thumbnail"> 
       <img src="http://placehold.it/320x200" alt="ALT NAME"> 
       <div class="caption"> 
        <h3>Title</h3> 

        <p>Seller: Me</p> 
        <p>Email: </p> 
        <p>Cost: </p> 
        <p>Condition: </p> 
        <p align="center"> 
        <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a> 
        </p> 
       </div> 
       </div> 
      </li> 
      <li class="span4"> 
       <div class="thumbnail"> 
       <img src="http://placehold.it/320x200" alt="ALT NAME"> 
       <div class="caption"> 
        <h3>Title</h3> 
        <span class="label label-warning" style="margin-bottom: 10px;">Book has been sold!</span> 
        <p>Seller: Me</p> 
        <p>Email: </p> 
        <p>Cost: </p> 
        <p>Condition: </p> 
        <p align="center"> 
        <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a> 
        </p> 
       </div> 
       </div> 
      </li> 
      <li class="span4"> 
       <div class="thumbnail"> 
       <img src="http://placehold.it/320x200" alt="ALT NAME"> 
       <div class="caption"> 
        <h3>Title</h3> 

        <p>Seller: Me</p> 
        <p>Email: </p> 
        <p>Cost: </p> 
        <p>Condition: </p> 
        <p align="center"> 
        <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a> 
        </p> 
       </div> 
       </div> 
      </li> 

      <li class="span4"> 
       <div class="thumbnail"> 
       <img src="http://placehold.it/320x200" alt="ALT NAME"> 
       <div class="caption"> 
        <h3>Title</h3> 

        <p>Seller: Me</p> 
        <p>Email: </p> 
        <p>Cost: </p> 
        <p>Condition: </p> 
        <p align="center"> 
        <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a> 
        </p> 
       </div> 
       </div> 
      </li> 
         <li class="span4"> 
       <div class="thumbnail"> 
       <img src="http://placehold.it/320x200" alt="ALT NAME"> 
       <div class="caption"> 
        <h3>Title</h3> 

        <p>Seller: Me</p> 
        <p>Email: </p> 
        <p>Cost: </p> 
        <p>Condition: </p> 
        <p align="center"> 
        <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a> 
        </p> 
       </div> 
       </div> 
      </li> 

      </ul> 
     </div> 
    </div> 
    </div> 
    </div> 

    </body>

바이올린 : http://jsfiddle.net/Z3VwZ/

화면 : enter image description here

출처

2013-04-07 Kevin

아니, div의 높이가 문제가되지 않습니다를 여기

는 내가 가지고있는 코드입니다. 문제는 .row-fluid 클래스로 하나의 div에 .span4 클래스로 세 개의 div 만 입력해야한다는 것입니다. .span4으로 더 많은 div를 원할 경우 .row-fluid 클래스로 새 div를 만들고 그 안에 새로운 .span4 div를 입력해야합니다. See Twitter bootstrap official documentation.

예를 들어

이 유효 트위터 부트 스트랩 마크 업 확실히 .. 내가 내부 div의를 실행하고 그것을 할 것

<div class="row-fluid"> 
    <div class="span4"></div> 
    <div class="span4"></div> 
    <div class="span4"></div> 
</div> 

<div class="row-fluid"> 
    <div class="span4"></div> 
    <div class="span4"></div> 
    <div class="span4"></div> 
</div> 

<div class="row-fluid"> 
    <div class="span12"></div> 
</div> 

<div class="row-fluid"> 
    <div class="span8"></div> 
    <div class="span1"></div> 
    <div class="span3"></div> 
</div>

코드와 데모를하고있다 >>>http://jsfiddle.net/Z3VwZ/1/

출처

2013-04-07 23:47:14

음 (또는 리) DB에서 루프를 통해, 그래서 난 단지 3 열 후 부모 div (행 유체) 밖으로 인쇄 알아낼 방법이 필요합니다. – Kevin

글쎄,이 위의 질문에 대한 답변입니다 :) 당신은 할 수 이 대답을 수락하고 문제 및 PHP 코드에 대한 설명과 함께 프로그래밍 문제에 대한 다른 질문을하십시오. –

좋은 지적 : http://stackoverflow.com/questions/15869534/nested-for-loop-difficulties – Kevin

부트 스트랩 미리보기 이미지가 제대로 스태킹되지 않음

답변

관련 문제