Question

嘿，我正在项目网站上工作，但我遇到了问题，列，

<div class="row-eq-height">
<div class="col-xs-4 col-md-4">
    <div class="thumbnail">
      <img src="img/seo.png" height="150" width="150">
      <div class="caption">
        <h4 class="text-center">SEO Services</h4><hr class="style-one">
        <h4 class="text-center">We provide you with SEO Services ,which will boost your site ranking on different search engine, Google,Yahoo,etc.</h4>
        <div class="text-right">
        <a href="#" class="btn btn-primary" >25$</a>
      </div>
      </div>
    </div>

    </div>


    <div class="col-xs-4 col-md-4 ">
    <div class="thumbnail">
      <img src="img/s2.png" height="150" width="150">
      <div class="caption">
        <h4 class="text-center">Websiite Templates</h4><hr class="style-one">
        <h4 class="text-center">Here we provide you with various different website templates,responsive, mobile interface enabled. as per your requirement.</h4> 
      </div>
    </div>

    </div>


    <div class="col-xs-4 col-md-4">
    <div class="thumbnail">
      <img src="img/s3.png" height="150" width="150">
      <div class="caption">
        <h4 class="text-center">hello</h4><hr class="style-on
        <h4></h4>
      </div>
    </div>

    </div>
</div>

Here是演示

我该如何纠正这个问题。

Answer 1

设置.thumbnail类

的最小高度

.thumbnail {
    min-height: 330px;
}

并且对于溢出问题添加

.text-center {
    word-wrap: break-word;
}

小提琴 http://jsfiddle.net/8d8g7hyt/3/

Answer 2

使用jquery检查是否正常

＆＃13;

var maxHeight = 0;

$('.thumbnails').each(function(){
   var thisH = $(this).height();
   if (thisH > maxHeight) { maxHeight = thisH; }
});

$('.thumbnails').height(maxHeight);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row-eq-height">
  <div class="col-xs-4 col-md-4">
    <div class="thumbnails">
      <img src="img/seo.png" height="150" width="150">
      <div class="caption">
        <div class="title">
          <h4 class="text-center">SEO Services</h4>
        </div>
        <hr class="style-one">
        <div class="text">
          <p class="text-center">We provide you with SEO Services ,which will boost your site ranking on different search engine, Google,Yahoo,etc.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="col-xs-4 col-md-4">
    <div class="thumbnails">
      <img src="img/seo.png" height="150" width="150">
      <div class="caption">
        <div class="title">
          <h4 class="text-center">SEO Services</h4>
        </div>
        <hr class="style-one">
        <div class="text">
          <p class="text-center">We provide you with SEO Services ,which will boost your site ranking on different search engine, Google,Yahoo,etc.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="col-xs-4 col-md-4">
    <div class="thumbnails">
      <img src="img/seo.png" height="150" width="150">
      <div class="caption">
        <div class="title">
          <h4 class="text-center">SEO Services</h4>
        </div>
        <hr class="style-one">
        <div class="text">
          <p class="text-center">We provide you with SEO Services ,which will boost your site ranking on different search engine, Google,Yahoo,etc.</p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

干杯!!!

Answer 3

这是一种方法，通过指定 min-height 。

http://jsfiddle.net/8d8g7hyt/1/

＆＃13;

.row-eq-height .col-xs-4 .thumbnail{
  min-height : 300px;
}

.row-eq-height .col-md-4 .thumbnail{
  min-height : 300px;
}

＆＃13;

<div class="row-eq-height">
<div class="col-xs-4 col-md-4">
    <div class="thumbnail">
      <img src="img/seo.png" height="150" width="150">
      <div class="caption">
        <h4 class="text-center">SEO Services</h4><hr class="style-one">
        <h4 class="text-center">We provide you with SEO Services ,which will boost your site ranking on different search engine, Google,Yahoo,etc.</h4>
        <div class="text-right">
        <a href="#" class="btn btn-primary" >25$</a>
      </div>
      </div>
    </div>
      
    </div>


    <div class="col-xs-4 col-md-4 ">
    <div class="thumbnail">
      <img src="img/s2.png" height="150" width="150">
      <div class="caption">
        <h4 class="text-center">Websiite Templates</h4><hr class="style-one">
        <h4 class="text-center">Here we provide you with various different website templates,responsive, mobile interface enabled. as per your requirement.</h4> 
      </div>
    </div>
      
    </div>


    <div class="col-xs-4 col-md-4">
    <div class="thumbnail">
      <img src="img/s3.png" height="150" width="150">
      <div class="caption">
        <h4 class="text-center">hello</h4><hr class="style-on
        <h4></h4>
      </div>
    </div>
      
    </div>
</div>

＆＃13;

同样，取决于您的需求，您可以使用 max-height 属性将高度限制为特定点或高度属性以具有修复高度

Answer 4

高度始终根据div中的内容设置，但您可以为div设置最小高度。根据需要设置最小高度，如下所示：

.col-xs-4{min-height:300px;}

我正在使用您的代码的基本类。您可以创建一个特殊的类并分配您的div。

等高柱引导3

4 个答案: