부트 스트랩을 사용하면 왜 잘못 정렬됩니까?

Question

부트 스트랩을 사용하면 내 페이지의 정렬이 엉망입니다. 회원 이름은 아이콘 바로 옆에 나타나야하지만 부트 스트랩을 사용하면 아이콘이 겹칩니다.
어떻게 해결할 수 있습니까? 브라우저 창을 작게 또한

은 사각형 줄이 너무 엉망이됩니다. 창문이 작을 때 데이터에 테두리가 있어야합니다. 이 같은

그러나 오히려 :

그래서 나는 다음과 같이하지 않으

을 나는이 아이콘이 할 수있는 경우, 그리고 중간에 이름이 없다.

DEMOhttp://jsfiddle.net/sbq7X/

HTML

<div class="store_row"> 
    <div class="store_left"> 
     <div class="store_title">walmart</div> 
     <div class="store_location">Located in California</div> 
    </div> 

    <div class="store_right"> 
     <div class="store_icon"> 
       <img class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon-300x266.jpg" /> 
     </div> 
     <div class="introduction"> 
      <div class="name1">John Tailor</div> 
      <div class="name2">Mike Smith</div> 
      <div class="name3">Jessica Swan</div> 
     </div> 
    </div> 

</div> 

    <div class="store_row"> 
    <div class="store_left"> 
     <div class="store_title">walmart</div> 
     <div class="store_location"><span class='text-error'>Located in California</span></div> 
    </div> 

    <div class="store_right"> 
     <div class="store_icon"> 
       <img class="img-polaroid" src="http://media-cache-ec1.pinterest.com/avatars/walmarthub-1349815045_600.jpg" /> 
     </div> 
     <div class="introduction"> 
      <div class="name1">John Tailor</div> 
      <div class="name2">Mike Smith</div> 
      <div class="name3">Jessica Swan</div> 
     </div> 
    </div> 

CSS

div.store_row{ 
    min-width: 300px; 
    margin-bottom: 20px; 
    margin-left: 10px; 
    margin-right: 10px; 
    border:1px solid; 
    display:table; 
} 

div.store_left{ 
    width: 300px; 
    display:inline-block; 
    vertical-align:top;  
} 

div.store_right{ 
    width: 300px; 
    display:inline-block; 
    vertical-align:top; 
    background-color: #FFFFFF; 
} 

div.store_title{ 
    background-color: #000000; 
    color: #FFFFFF; 
    height: 35px; 
    padding:5px; 
} 

div.store_location{ 
    height: 35px; 
    border-right:1px solid; 
    background-color: #FFFFFF; 
    padding:5px; 
} 

div.store_icon{ 
    width: 70px; 
    height: 70px; 
    display:inline-block; 
} 

div.store_icon img{ 
    width:100%; 
    height:100%; 
} 

div.introduction{ 
    display:inline-block; 
    vertical-align:top; 
    width:200px; 
    text-align: left; 
} 

.... and bootstrap 

Answer 1

img-polaroid 클래스는 4 픽셀 패딩을 가지고 있으며,이 문제가 발생합니다

.img-polaroid { 
    padding: 4px; 
    background-color: #fff; 
    border: 1px solid #ccc; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
} 

여기가 제거 된 fiddle을 참조하십시오.

편집 : 정렬이 잘 작동합니다. 당신은 모든 요소들에 대한 정적 너비를 가지며 그것들은 바이올린을 위해 너무 넓습니다. 나는 그들의 크기를 줄 였기 때문에 그들은 지금 인라인이다.