반응적이고 정렬 가능한 부트 스트랩 섬네일

부트 스트랩 3을 사용하여 축소판 목록을 포맷하여 대형 화면에서는 4 줄, 작은 화면에서는 2 줄로 표시하고 싶습니다. 또한 드래그 앤 드롭이 가능해야합니다. 미리보기 이미지를 삭제하여 순서를 변경하십시오.반응적이고 정렬 가능한 부트 스트랩 섬네일

지금까지 내가 미리가 같은 높이하지 않기 때문에 나는 clear 사용이 (LESS)처럼 스타일이 마크 업

<ul class="thumbnails list-unstyled"> 
<li class="thumbnail-container"> 
     <div class="thumbnail"> 
      <img src="..."> 
     </div> 
    </li> 
</ul>

.thumbnails { 
    .row; 
    .clearfix; 

    .thumbnail-container { 
     .make-md-column(3); 

     &:nth-child(4n+1) { 
      clear: left; 
     } 
    } 
}

을 시도했다. 정렬 할 때 jQuery UI Sortable 및 this script을 사용하여 정렬을 구현하려고했지만 동일한 경우 모두 정렬되었습니다. 정렬 할 때 축소판의 행이 너무 자주 끊어져 그리드에 간격이 생길 수 있습니다.

어떻게 든 해결 될 수 있습니까? 나는 벽돌이나 동위 원소 같은 것을 사용할 수 있다는 것을 알고 있지만, 그것은 나를 위해 엄청난 잔인한 것처럼 보인다. 문제는 최신 Firefox와 Chrome에서 동일합니다.

출처

2014-11-12 Teyras

정말 바로 그 질문에 대한 대답을해야합니다! – amdev

-1

부트 스트랩의 힘을 사용하십시오. 당신이 뭔가를 할 수 있습니다

<div class="container"> 
    <div id="#sortable" class="row"> 

     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
      <a href="#" class="thumbnail"> 
       <img src="" alt="..."> 
      </a> 
     </div> 

     ... 

    </div> 
</div>

마법 때문에 "COL-XS-12 COL-SM-6 COL-MD-3 COL-LG-3"의 발생합니다. 이것은 기본적으로 여분의 소형 장치에서 엄지 손가락이 컨테이너의 전체 폭 (12/12)을 차지해야한다는 것을 알려줍니다. 소형 장치에서는 너비의 절반 (6/12)이 필요하며 중형 및 대형 화면에서는 너비의 1/4 (3/12)을 차지합니다. 자세한 내용은

: http://getbootstrap.com/css/#grid-media-queries

드래그 앤 당신이 타사 자바 스크립트는 이것을 달성하기 위해 사용하는 것이 좋습니다 축소판을 삭제하려면. 예를 들어이 같은 "jQuery를 UI 정렬 가능한"를 사용할 수 있습니다 자세한 내용은

<script> 
    $(function() { 
     $("#sortable").sortable(); 
    }); 
</script>

가 참조 :http://jqueryui.com/sortable/

출처

2014-11-12 23:04:09 iivannov

예,이 시도하고 내 레이아웃을 드래그하는 동안 고장 났어요. 또한 높이가 같지 않은 축소판에 대해서는 레이아웃이 중단됩니다. – Teyras

질문은 부트 스트랩 그리드와 함께 jquery sortable (여기에 축소판 그림)과 같은 것을 사용하기 때문에 질문에 대답하지 않는 것입니다. – amdev

반응적이고 정렬 가능한 부트 스트랩 섬네일

답변

관련 문제