个人中心
gpt4 book ai didi

jquery - Bootstrap缩略图+每行高度相同的标题？

转载 作者：行者123 更新时间：2023-12-01 00:18:03 24 4
gpt4 key购买 nike

有相关问题here或here ，尽管似乎没有一个对我有用。

我按照 Bootstrap 示例来实现 thumbnails with captions 。但是，我的标题文本长度不同，导致三个缩略图的高度不同。这样看起来比较难看。为了解决这个问题，我尝试了 matchHeight jQuery 插件，但没有效果。

这是我的代码:

<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
  <script src="js/jquery.matchHeight-min.js" type="text/javascript"></script> 
  <script type="text/javascript">                                             
    $(".thumbnail").matchHeight({ byRow: true, });                            
  </script>                                                                   
</head>                                                                       
<body>                                                                        
  ...
  <div class="row">                                                       
    <div class="col-lg-4 col-md-4 col-xs-12">                             
      <div class="thumbnail">                                             
        <img class="img-responsive" src="img/img-1.jpg" alt="">      
        <div class="caption">                                             
          <h4>Heading 1</h4>                                                 
          <p>...</p>
        </div>                                                            
      </div>                                                              
    </div>                                                                
    <div class="col-lg-4 col-md-4 col-xs-12">                             
      <div class="thumbnail">                                             
        <img class="img-responsive" src="img/img-2.jpg" alt="">      
        <div class="caption">                                             
          <h4>Heading 2</h4>                                                 
          <p>...</p>
        </div>                                                            
      </div>                                                              
    </div>                                                                
    <div class="col-lg-4 col-md-4 col-xs-12">                             
      <div class="thumbnail">                                             
        <img class="img-responsive" src="img/img-3.jpg" alt="">      
        <div class="caption">                                             
          <h4>Heading 3</h4>                                                 
          <p>...</p>
        </div>                                                            
      </div>                                                              
    </div>                                                                
  </div>                                                                  
  ...
</body>

我在这里缺少什么？我怎样才能让这三个缩略图很好地对齐？

最佳答案 

.thumbnail {
  height: 547px;
  overflow-y: hidden;
}
.img-responsive {
  margin-bottom: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-lg-4 col-md-4 col-xs-12">
    <div class="thumbnail">
      <img class="img-responsive" src="http://cdn.makeuseof.com/wp-content/uploads/2012/01/8bit_mushroom_intro.jpg?92a7a3" alt="">
      <div class="caption">
        <h4>Heading 1</h4> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit maximus nulla id eleifend. Curabitur sit amet tellus vitae orci condimentum aliquam. Aenean facilisis lacinia suscipit. Cras quam massa, pharetra a convallis nec,
          gravida eu metus. Phasellus gravida faucibus nulla, sit amet suscipit purus. Donec luctus, ligula sed finibus congue, libero odio ultricies nulla, a pharetra diam mauris non turpis. Phasellus a aliquet lorem.</p>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-4 col-xs-12">
    <div class="thumbnail">
      <img class="img-responsive" src="http://cdn.makeuseof.com/wp-content/uploads/2012/01/8bit_mushroom_intro.jpg?92a7a3" alt="">
      <div class="caption">
        <h4>Heading 2</h4> 
        <p>Nullam pulvinar posuere arcu ac mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis in interdum leo. Nunc sed purus vel eros mollis pharetra sit amet sit amet felis. Ut pharetra mi ac dolor
          dignissim facilisis. Phasellus odio massa, pulvinar sed velit ac, malesuada posuere urna. Aliquam urna eros, sollicitudin et diam quis, lacinia feugiat erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
          Aenean porttitor, tortor sit amet accumsan placerat, ante augue pretium nunc, vel volutpat turpis ex vitae dui. Etiam imperdiet turpis sed ante posuere, venenatis lobortis lorem pharetra.</p>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-4 col-xs-12">
    <div class="thumbnail">
      <img class="img-responsive" src="http://cdn.makeuseof.com/wp-content/uploads/2012/01/8bit_mushroom_intro.jpg?92a7a3" alt="">
      <div class="caption">
        <h4>Heading 3</h4> 
        <p>Quisque mollis sollicitudin tellus, in sagittis diam rutrum ut. Mauris ex arcu, vehicula et ullamcorper id, viverra vel nibh. Ut vestibulum tellus vel erat lobortis, quis fringilla nulla semper. Proin a varius tortor, ac varius tortor. Sed fringilla
          dignissim neque cursus sit amet. Maecenas molestie hendrerit orci, ut faucibus mauris tempor in.</p>
      </div>
    </div>
  </div>
</div>

关于jquery - Bootstrap缩略图+每行高度相同的标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30205766/

24 4 0
文章推荐： python - 在 python AWS lambda 中使用 aws 加密 SDK
文章推荐： python - Django MySQL 完整性错误 : ("Field ' created_at' doesn't have a default value")
文章推荐： javascript - Array.prototype.includes() 通配符选项？
文章推荐： distributed - 是否可以在给定客户端实例的情况下关闭 dask.distributed 集群？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com