부트 스트랩 3 이미지 갤러리 오버라이드

부트 스트랩 3 RC1을 사용하고 있으며 이미지 갤러리를 올바르게 설정하는 데 문제가 있습니다.부트 스트랩 3 이미지 갤러리 오버라이드

문제 1 - ul에 padding-left 또는 margin-left이 추가되었습니다. 제거하기 위해 무엇을 재정의해야합니까?

문제 2 - 각 li은 span4 클래스로 제한되는 대신 컨테이너에 걸쳐 있습니다. 행당 두 개의 이미지가 필요합니다.

문제가있는 위치를 보여주는 이미지를 아래에 추가했습니다.

HTML

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-12"> 
     <div id="allVideos"> 
     <ul class="thumbnails"> 
      <li class="span4"> 
      <div class="thumbnail"> 
       <img src="<%= thumbnail_image %>"> 
       <div class="caption"> 
       <a data-attribute="<%= _id %>" class="delete">X</a> 
       <h3><a class="video_item"><%= title %></h3></h3> 
       </div> 
       </div> 
      </li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </div>

이미지 enter image description here

출처

2013-08-12 Evan Emolo

단순히'추가합니까 패딩 왼쪽 : 0;'와'마진 왼쪽 : 0; 'CSS가 첫 번째 문제를 해결하지 못했습니까? – MitulP91

또한, 부트 스트랩에서 컨테이너를 사용할 때 왼쪽과 오른쪽에 여백이 자동으로 생성됩니까? 나는 Bootstrap 3을 아직 실험하지 않았으므로 그것이 바뀌 었는지 여부를 확신 할 수 없다. – MitulP91

@ MitulP91 고마워, 그게 문제가 해결 된 1. –

Bootstrap 2.3은 "span"클래스 (예제에서는 span4)를 사용했으며 Bootstrap 3.0은 "col-X"클래스 (예제에서는 col-lg-X)를 사용합니다. "span"클래스는 더 이상 존재하지 않습니다.

문제 1 - list-unstyled 클래스를 사용하여 <li> 아동의 왼쪽/오른쪽 여백을 제거하십시오. http://getbootstrap.com/css/#type-lists

문제 2-3의 새로운 클래스 부트 스트랩을 스팬 클래스를 삭제하고 사용

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <ul class="list-inline list-unstyled row"> 
 
    <li class="col-lg-4"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/350x150" alt=""> 
 
     <div class="caption"> 
 
      <a class="delete">X</a> 
 
      <h3><a class="video_item">Howdy</a></h3> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    <li class="col-lg-4"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/350x150" alt=""> 
 
     <div class="caption"> 
 
      <a class="delete">X</a> 
 
      <h3><a class="video_item">Howdy</a></h3> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    <li class="col-lg-4"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/350x150" alt=""> 
 
     <div class="caption"> 
 
      <a class="delete">X</a> 
 
      <h3><a class="video_item">Howdy</a></h3> 
 
     </div> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

출처

2013-08-13 02:38:29

이미지에이 추가 시도는 반응 만들려면 :

<img src="<%= thumbnail_image %>" class="img-responsive">

(참조 : http://getbootstrap.com/css/#overview-responsive-images)

을

패딩 및 여백에 대해 사용자 정의 스타일을 추가하여 재정의 할 수 있습니까?

.thumbnails{ margin-left:0; padding-left: 0;}

출처

2013-08-12 19:51:27

고마워. 이미지는 실제로 반응 적입니다. 이미지와 컨테이너 스팬 사이의 모든 공백을 추가하는'thumbnail' 클래스입니다. –

또한 당신이 this thread

에서 트위터 부트 스트랩 3는 아직 공사중 것 같다 그리고 내가 col-lg-12 클래스는 여전히 몇 가지 문제가 있다고 생각 볼 것을 권장합니다. 나는 단지 그것을 잠깐 훑어 보았다.

희망이 도움이됩니다.

출처

2013-08-12 20:02:41 MitulP91

부트 스트랩 3 이미지 갤러리 오버라이드

답변

관련 문제