對齊引導縮略圖組件

我正在使用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

的第四塊被切換到右時，由於不同的塊的高度。

當我調整屏幕大小，並且所有塊文本需要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;

來源

2014-09-01 Anthony

你可以發佈'/ stylesheets/template.css'的代碼嗎？ – 2014-09-01 11:08:49

這是默認的css行爲。您必須擁有完全相同的高度，或使用flexbox或腳本來解決此問題。 – Christina 2014-09-02 05:41:43

這是一個真正的問題，當談到風格的砌體磚。你可以用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);

來源

2014-09-01 11:04:17

我在腳本節點下的頭節點上添加了腳本。但沒有任何改變（我是在瀏覽器端JavaScript的新手...）＃： var height = 0;每個（function（）{if（height <$（「。col-md-4」）。outerHeight（）） height = $（「。col-md-4」 -4「）。outerHeight（）; }）; $（「。col-md-4」）。height（height）; ' – Anthony 2014-09-02 11:57:53

沒有。你需要在'$（document）.ready（function（）{}）;'中添加它 – 2014-09-02 12:06:08

對齊引導縮略圖組件

回答

相關問題