css - Bootstrap grid layout issue - does not work as intended -
all items in grid layout set same height, still have problem:
<!-- featured-box --> <div class="featured-box"> <div class="col-md-4 col-sm-4 col-xs-6"> <div class="video-box featured-event-box"> <div class="row"> <div class="col-md-4"> <div class="featured-event-image-box"> <a href="#"><img src="images/featured-event-01.jpg" class="img-responsive transparent-onhover" /></a> </div> </div> <div class="col-md-8"> <p>20th jan 2016</p> <h4 class="featured-event-heading truncate"><a href="#" title="lorem ipsum dolor sit amet">lorem ipsum dolor sit amet</a></h4> <p class="truncate-multiple" title="nemore praesent eam. duo partem possim. sit posse euismod ad, pro no lorem melius dissentiet. ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.">nemore praesent eam. duo partem possim. sit posse euismod ad, pro no lorem melius dissentiet. ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.</p> </div> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6"> <div class="video-box"> <!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/qyv5r_e5htm" frameborder="0" allowfullscreen></iframe> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6"> <div class="video-box featured-event-box"> <div class="row"> <div class="col-md-4"> <div class="featured-event-image-box"> <a href="#"><img src="images/featured-event-01.jpg" class="img-responsive transparent-onhover" /></a> </div> </div> <div class="col-md-8"> <p>20th jan 2016</p> <h4 class="featured-event-heading truncate"><a href="#" title="lorem ipsum dolor sit amet">lorem ipsum dolor sit amet</a></h4> <p class="truncate-multiple" title="nemore praesent eam. duo partem possim. sit posse euismod ad, pro no lorem melius dissentiet. ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.">nemore praesent eam. duo partem possim. sit posse euismod ad, pro no lorem melius dissentiet. ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.</p> </div> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6"> <div class="video-box"> <!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/feq99sugdsw" frameborder="0" allowfullscreen></iframe> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6"> <div class="video-box featured-event-box"> <div class="row"> <div class="col-md-4"> <div class="featured-event-image-box"> <a href="#"><img src="images/featured-event-01.jpg" class="img-responsive transparent-onhover" /></a> </div> </div> <div class="col-md-8"> <p>20th jan 2016</p> <h4 class="featured-event-heading truncate"><a href="#" title="lorem ipsum dolor sit amet">lorem ipsum dolor sit amet</a></h4> <p class="truncate-multiple" title="nemore praesent eam. duo partem possim. sit posse euismod ad, pro no lorem melius dissentiet. ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.">nemore praesent eam. duo partem possim. sit posse euismod ad, pro no lorem melius dissentiet. ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.</p> </div> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-6"> <div class="video-box"> <!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/r_kewddtrvc" frameborder="0" allowfullscreen></iframe> </div> </div> </div> </div> <!-- featured-box -->
css:
.featured-heading-box { padding: 0 15px; } .featured-heading { font-size: 20px; padding: 0 0 15px 0; border-bottom: 1px solid #b2b2b2; } .video-box { padding: 15px 0 15px 0; /*border: 1px solid red;*/ } /** * https://css-tricks.com/snippets/css/css-box-shadow/#article-header-id-1 */ .featured-event-box { padding: 15px; margin: 15px 0 15px 0; min-height: 196px; overflow: hidden; border: 1px solid #e6e6e6; background-color: #f9f9f9; -moz-box-shadow: inset 0 0 10px #e6e6e6; -webkit-box-shadow: inset 0 0 10px #e6e6e6; box-shadow: inset 0 0 10px #e6e6e6; } .featured-event-image-box { margin-bottom: 15px; } .featured-event-heading { font-size: 14px; color: inherit; } .featured-event-heading a:hover { text-decoration: none; color: #888; }
any idea why , how can fix this?
if going use columns in grid, need have columns inside of row:
<div class="row"> <div class="col-md-4"> stuff </div> <div class="col-md-4"> more stuff </div> </div>
Comments
Post a Comment