만들기 사진 썸네일 태그의 경계에 "스틱"

Question

나는 직원 목록 (각 행의 2 개 항목) 만드는거야

, 내가 발견 한 몇 가지 문제 :

• 나는 그림이 전체 사용하려면 목록 항목의 왼쪽 공간 - 예는 여기에 있습니다 : 썸네일 클래스 목록 항목의 http://2fm9xz2drvqemrbu.zippykid.netdna-cdn.com/wp-content/uploads/2013/01/facebook-search-results.jpg
• 경계가 서로 접촉 - 내가 바이올린에 약간의 패딩을

내 예를 싶습니다 http://jsfiddle.net/bC4Wy/

012 3,516,

내 목록 항목 코드 :

<div class="col-sm-6 col-xs-12 thumbnail"> 
    <div> 
     <div class="col-xs-3"><img class="img-responsive" src="http://lorempixel.com/300/300/" /></div> 
     <div class="col-xs-9"> 
      <div class="h4">Paul Smith</div> 
      <div>Title: Developer</div> 
      <div>Skills: C#, .NET</div> 
     </div> 
    </div> 
</div> 

Answer 1

은 당신이 미리보기를 사용하여 직접 COL의 내부에 "안부"를두고있는 것을 알 수있다.

당신은 모든 미리보기를 사용하지 고려할 수 :

<div class="col-sm-6 col-xs-12 listitem"> 
    <div class="row"> 
    <div class="col-xs-3"><img class="img-responsive" src="http://lorempixel.com/300/300/"/></div> 
    <div class="col-xs-9"> 
     <div class="h4">Paul Smith</div> 
     <div>Title: Developer</div> 
     <div>Skills: C#, .NET</div> 
    </div> 
    </div> 
</div> 

CSS

.listitem { 
    border-radius: 5px; 
    border: 1px solid black; 
    overflow-y:hidden; 
} 

.listitem img {margin-left: -15px;} 

나는 또한 일관하게 될 레이아웃을 확보하기 위해 추가 row을 추가했습니다. mozilla와 webkit의 테두리 반지름에 스타일을 추가 할 수 있습니다.