Question

我正在使用Bootstrap组件，并且由于文本的原因，对齐缩略图组件时遇到了一些问题，这些问题有各种各样的大小。

我的目标是拥有一种控制面板，根据用户权限显示不同的访问权限（有时会显示3个区块，有时会显示10个区块）

这是代码。

<!DOCTYPE html>
<html lang="fr">
  <head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.2/css/font-awesome.min.css">
    <link rel="stylesheet" href="/stylesheets/template.css">
    <script type="text/javascript" src="/bootstrap/js/bootstrap-filestyle.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js" charset="utf-8">     </script>     
    <script type="text/javascript">
      var height = 0;
        $(".col-md-4").each(function(){
          if (height < $(".col-md-4").outerHeight())
            height = $(".col-md-4").outerHeight();
        });
      $(".col-md-4").height(height);

</script>
</head>
  <body>
    <div class="container">
      <div style="text-align:center;" class="row">
        <div class="col-sm-6 col-md-4">
          <div class="thumbnail"><img src="/images/fonctionnalites/degustations_300x200.jpg" alt="..." class="img-thumbnail">
            <div class="caption">
              <h3>Dégustations</h3>
              <p>Retrouvez les dernieres dégustations de votre reseau.</p>
              <p><a href="" class="btn btn-success btn-block">Afficher</a></p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="thumbnail"><img src="/images/fonctionnalites/Vins_300x200.jpg" alt="..." class="img-thumbnail">
            <div class="caption">
              <h3>Vins</h3>
              <p>Retrouvez tous les vins de la base et leurs étiquettes</p>
              <p><a href="" class="btn btn-success btn-block">Afficher</a></p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="thumbnail"><img src="/images/fonctionnalites/vignerons_300x200.jpg" alt="..." class="img-thumbnail">
            <div class="caption">
              <h3>Vignerons</h3>
              <p>Rencontrez les Vignerons français et leurs terroirs !</p>
              <p><a href="" class="btn btn-success btn-block">Afficher</a></p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="thumbnail"><img src="/images/fonctionnalites/cavistes_300x200.jpg" alt="..." class="img-thumbnail">
            <div class="caption">
              <h3>Cavistes</h3>
              <p>Rencontrez les Cavistes français proches de vous !</p>
              <p><a href="" class="btn btn-success btn-block">Afficher   </a></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

这里有一些截图取决于屏幕尺寸：

enter image description here

由于块高不同，第4块切换到右侧。

当我调整屏幕大小，并且所有块文本需要2行时，它们的高度变得相同，并且这个世界是完美的。

enter image description here

问题：如何在每个屏幕配置中强制执行此行为。

使用CSS（标准版）：

body {
  padding-top: 0px;
  padding-bottom: 75px;
  word-wrap:break-word;
}



.starter-template {
  padding: 40px 15px;
  text-align: center;

}

.bs-docs-example 
{
    position: relative;
    margin: 15px 0;
    padding: 39px 19px 14px;
    background-color: white;
    border: 1px solid #DDD;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.bs-docs-example::after
{
    content: "Example";
    position: absolute;

Answer 1

对于砌体样式的瓷砖来说，这是一个真正的问题。您可以这样使用JavaScript来实现：

var height = 0;
$(".col-md-4").each(function(){
  if (height < $(".col-md-4").outerHeight())
    height = $(".col-md-4").outerHeight();
});
$(".col-md-4").height(height);

对齐引导程序缩略图组件

1 个答案: