Проблема с изменением размера бутстрапа 3 в соответствии с изображением

Question

См. Первое изображение ниже.

Это работает прекрасно, и, как я хочу, чтобы она выглядела. Однако при изменении размера браузера он выглядит следующим образом.

Как вы можете видеть белый фон текстового блока больше, чем от блока изображения. Я хочу, чтобы блок изображения был такой же высоты, как текстовый блок, но, к сожалению, это не работает. Я использую Bootstrap 3 развивать это, и вы можете увидеть мой код для этого ниже:

 <div class="row" style="margin-bottom:30px;"> 
      <div class="col-xs-12"> 
       <div class="col-sm-3" style="padding:0;"> 
       <img src="core/img/abb[square].jpg" class="img-responsive"> 
       </div> 

       <div class="col-sm-9" style="background:#fff; height:218px; padding:7px 25px;"> 
       <h2><a class="a-cl">Page title</a> <small>2.1 miles away</small></h2> 

       <p>Text content, summary of page here.</p> 

       <a href="#" class="btn btn-success">Subscribed <i class="glyphicon glyphicon-ok" style="margin-left:4px;"></i></a> 
       </div>  
      </div> 
     </div> 

Любая помощь будет оценена. Как вы можете видеть, я вручную определил высоту на <div class="col-sm-9"> и установил height:218px. Это, очевидно, не будет работать динамически по мере изменения размера страницы.

Резюме: Ищу эффективный способ убедиться в высоту текстового блока такой же, как блок изображения, используя загрузочный 3.

Answer 1

Хорошо, это с внутренними отношениями, это не нравится комментарии, которые я сделал. Однако комментарий о строках и столбцах и вложенности правилен.

ДЕМОНСТРАЦИОННЫЕ: http://jsbin.com/zodama/1/

http://jsbin.com/zodama/1/edit

Требуется: jquery.matchHeight-min.js

• https://github.com/liabru/jquery-match-height

JQuery (если установлен скрипт):

$(document).ready(function() { 

    $('.my-row [class*="col-"]').matchHeight(); 

}); 

---

CSS-, некоторые из которых является соотношение сторон и некоторые из которых Bootstrap манипуляции сетки на основе глубоких знаний о том, как она работает.

.my-row { 
    border: 10px solid #ddd; 
    margin-left: 0; 
    margin-right: 0; 
    margin-bottom: 3%; 
    text-align: center; 
} 
.image img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
    margin: 0 auto; 
} 
.my-row [class*="col-"] { 
    padding:0 0 10px 0; 
} 
@media (min-width:768px) { 
    .my-row { 
     border: 10px solid #ddd; /* remove this it's in the global */ 
     text-align: left; 
    } 
    .my-row [class*="col-"] { 
     padding: 0; 
     min-height: 220px; 
    } 
    .my-row [class*="col-"]:last-child { 
     padding-left: 20px; 
     padding-bottom: 20px; 
    } 
    .image img { 
     display: block; 
     width: 100%; 
     height: 100%; 
     margin: auto; 
     -webkit-transition: all 2s ease-out; 
     transition: all 2s ease-out; 
    } 
    .image img { 
     position: absolute; 
     left: 0; 
     right: 0; 
     top: 0; 
     bottom: 0; 
    } 
    .image { 
     position: relative; 
     height: 0; 
     padding-top: 56.25%; 
    } 
} 


@media (min-width:992px) { 
    .my-row [class*="col-"] { 
     min-height: 250px; 
    } 

} 

@media (min-width:1200px) { 
    .my-row [class*="col-"] { 
     min-height: 275px; 
    } 

} 

---

HTML

<div class="container"> 
    <div class="row my-row"> 
     <div class="col-sm-4 col-md-3 image"> 
      <img src="http://lorempixel.com/320/320/sports"/> 
     </div> 
     <div class="col-sm-8 col-md-9"> 
      <h2><a class="a-cl">Page title</a> <small>2.1 miles away</small></h2> 
      <p>Text content, summary of page here.</p> 
      <a href="#" class="btn btn-success">Subscribed <i class="glyphicon glyphicon-ok"></i></a> 
     </div> 
    </div> 
<div class="row my-row"> 
    <div class="col-sm-4 col-md-3 image"> 
     <img src="http://lorempixel.com/320/320/city"/> 
    </div> 
    <div class="col-sm-8 col-md-9"> 
     <h2><a class="a-cl">Page title</a> <small>2.1 miles away</small></h2> 
     <p>Text content, summary of page here.</p> 
     <p>Text content, summary of page here.</p> 
     <p>Text content, summary of page here.</p> 
     <p>Text content, summary of page here.</p> 
     <p>Text content, summary of page here.</p> 
     <a href="#" class="btn btn-success">Subscribed <i class="glyphicon glyphicon-ok"></i></a> 
    </div> 
</div>