Bootstrap 3带图像的div列表

时间：2014-08-20 09:04:20

标签： twitter-bootstrap responsive-design twitter-bootstrap-3

我正在使用bootstrap3并尝试使用标题创建图像列表。 数据是动态的，所以我无法分辨标题的大小。 我希望每行列表调整他的邻居标题高度 enter image description here

2 个答案:

答案 0 :(得分：3)

最简单且与传统浏览器兼容的方式，我要解决的是使用jQuery来匹配每行标题的高度http://brm.io/jquery-match-height/。

另一种选择是使用FlexBox：http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback。

如果所有的拇指/标题都在同一行，那么它将基于最高的全部相同，因此每隔4行分开，请参阅GetBootstrap.com的文档，了解如何使用网格系统

仔细看看CSS。将来，使用占位符图像制作小提琴，Bootply或JSBin。

DEMO：http://jsbin.com/pilid/1

带编辑的演示：http://jsbin.com/pilid/1/edit

enter image description here

的jQuery 

/* __________________ RESPONSIVE EQUAL HEIGHTS __________________*/
/*! jquery.matchHeight-min.js v0.5.1   |   http://brm.io/jquery-match-height/   |   License: MIT  */

(function(a){a.fn.matchHeight=function(b){if("remove"===b){var f=this;this.css("height","");a.each(a.fn.matchHeight._groups,function(g,h){h.elements=h.elements.not(f)});return this}if(1>=this.length){return this}b="undefined"!==typeof b?b:!0;a.fn.matchHeight._groups.push({elements:this,byRow:b});a.fn.matchHeight._apply(this,b);return this};a.fn.matchHeight._apply=function(b,g){var h=a(b),f=[h];g&&(h.css({display:"block","padding-top":"0","padding-bottom":"0","border-top":"0","border-bottom":"0",height:"100px"}),f=c(h),h.css({display:"","padding-top":"","padding-bottom":"","border-top":"","border-bottom":"",height:""}));a.each(f,function(i,l){var k=a(l),j=0;k.each(function(){var m=a(this);m.css({display:"block",height:""});m.outerHeight(!1)>j&&(j=m.outerHeight(!1));m.css({display:""})});k.each(function(){var m=a(this),n=0;"border-box"!==m.css("box-sizing")&&(n+=e(m.css("border-top-width"))+e(m.css("border-bottom-width")),n+=e(m.css("padding-top"))+e(m.css("padding-bottom")));m.css("height",j-n)})});return this};a.fn.matchHeight._applyDataApi=function(){var b={};a("[data-match-height], [data-mh]").each(function(){var f=a(this),g=f.attr("data-match-height");b[g]=g in b?b[g].add(f):f});a.each(b,function(){this.matchHeight(!0)})};a.fn.matchHeight._groups=[];var d=-1;a.fn.matchHeight._update=function(b){if(b&&"resize"===b.type){b=a(window).width();if(b===d){return}d=b}a.each(a.fn.matchHeight._groups,function(){a.fn.matchHeight._apply(this.elements,this.byRow)})};a(a.fn.matchHeight._applyDataApi);a(window).bind("load resize orientationchange",a.fn.matchHeight._update);var c=function(b){var f=null,g=[];a(b).each(function(){var i=a(this),k=i.offset().top-e(i.css("margin-top")),j=0<g.length?g[g.length-1]:null;null===j?g.push(i):1>=Math.floor(Math.abs(f-k))?g[g.length-1]=j.add(i):g.push(i);f=k});return g},e=function(b){return parseFloat(b)||0}})(jQuery);


$(document).ready(function () {


    /* ----------  equal height columns   -------- */
    $('.caption').matchHeight();



}); // end document ready

CSS 

.thumb-box {
    background: #000;
    padding: 3px;
    margin: 10px 0;
}

.caption {
    position: relative;
    padding: 5px;
    text-align: center;
    color: #fff;
}

.thumb-box img {
    width: 100%;
    height:auto;
}

/* center caption vertically except on < ie8 */
.caption p {
    position: relative;
    top: 50%;
    top:0%\9; /*ie8*/
    transform: translateY(-50%);
}

/**/
@media (max-width:767px) {
  .thumb-row {margin-left:-2%;margin-right:-2%;}
  .thumb-row [class*=col-] {padding-left:2%;padding-right:2%;}

}

HTML 

<div class="container">

 <h1>Uses jQuery to make the captions equal per row</h1>
  <p>This turns in to 2 columns on the xs breakpoint.</p>

 <div class="row thumb-row">
  <div class="col-sm-3 col-xs-6">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3 col-xs-6">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption. Longer Caption</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3 col-xs-6">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3 col-xs-6">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
 </div>
 <!--/.row -->

 <div class="row thumb-row">
  <div class="col-sm-3 col-xs-6">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3 col-xs-6">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3 col-xs-6">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3 col-xs-6">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption. Much longer caption tha the other caption.</p>
    </div>
   </div>
  </div>
 </div>
 <!--/.row -->

  <hr>

    <h1>Uses jQuery to make the captions equal per row</h1>
  <p>This stacks on small viewports less than 767px.</p>

 <div class="row">
  <div class="col-sm-3">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption. Longer Caption</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3 col-xs-6">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
 </div>
 <!--/.row -->

 <div class="row">
  <div class="col-sm-3">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption.</p>
    </div>
   </div>
  </div>
  <div class="col-sm-3">
   <div class="thumb-box">
    <img src="http://placekitten.com/g/300/300"/>
    <div class="caption">
     <p> Oh Caption, my Caption. Much longer caption tha the other caption.</p>
    </div>
   </div>
  </div>
 </div>
 <!--/.row -->



</div>
<!--/.container -->

答案 1 :(得分：0)

背景颜色黑色是个问题。您可以使用 table-cell 并使用background:black

或者您可以修改your html structure 

*{margin:0;padding:0}
.bloc {
  width:250px; 
  display:table-cell;
  border:10px solid white;
  border-bottom:0;
}

.legende{
  background:black;
  color:white;
  width:250px;
  display:table-cell; 
  border:10px solid white;
  border-top:0
}

.line{
  margin-bottom:-5px;
}
相关问题
最新问题