帶砌體插件的Bootstrap

我無法找到解決我的代碼中的錯誤以及爲什麼它會這樣做。我有3柱，後者不適合同一條線。爲什麼她搬下來，而不是保持在同一條線上？帶砌體插件的Bootstrap

我的代碼： http://jsbin.com/kolobugosika/2/edit

感謝您的幫助

2014-09-19 user3279494

砌體有一個佈局錯誤。使用打包http://jsbin.com/jodaba/1/edit – Christina 2014-09-20 00:56:44

你有一對夫婦的錯誤，第一個是概念上的約引導。僅供參考，請記住一排的總和必須是12（除非您使用的是自定義啓動網格），所以你當前的代碼

<div class="container"> 
    <div class="row masonry"> 
     <div class="col-sm-3 col-md-6"> 
      <div class="thumbnail"> 
       <img src="http://www.fakenamegenerator.com/dummyimage/230x230/CCCCCC/000000/1 " class="img-responsive" alt="Responsive image"> 
       <div class="caption"> 
        <h3>Thumbnail label 1</h3> 
        <p> 
         Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda. 
        </p> 
        <p> 
         <a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a> 
        </p> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-3 col-md-3"> 
      <div class="thumbnail"> 
       <img src="http://www.fakenamegenerator.com/dummyimage/330x330/CCCCCC/000000/1 " class="img-responsive" alt="Responsive image"> 
       <div class="caption"> 
        <h3>Thumbnail label 2</h3> 
        <p> 
         Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda. 
        </p> 
        <p> 
         <a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a> 
        </p> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-3 col-md-3"> 
      <div class="thumbnail"> 
       <img src="http://www.fakenamegenerator.com/dummyimage/230x230/CCCCCC/000000/1 " class="img-responsive" alt="Responsive image"> 
       <div class="caption"> 
        <h3>Thumbnail label 3</h3> 
        <p> 
         Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda. 
        </p> 
        <p> 
         <a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a> 
        </p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

已被修改爲：

<div class="container"> 
    <div class="row masonry"> 
     <div class="col-sm-4 col-md-6"> 
      <div class="thumbnail"> 
       <img src="http://www.fakenamegenerator.com/dummyimage/230x230/CCCCCC/000000/1 " class="img-responsive" alt="Responsive image"> 
       <div class="caption"> 
        <h3>Thumbnail label 1</h3> 
        <p> 
         Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda. 
        </p> 
        <p> 
         <a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a> 
        </p> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-4 col-md-3"> 
      <div class="thumbnail"> 
       <img src="http://www.fakenamegenerator.com/dummyimage/330x330/CCCCCC/000000/1 " class="img-responsive" alt="Responsive image"> 
       <div class="caption"> 
        <h3>Thumbnail label 2</h3> 
        <p> 
         Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda. 
        </p> 
        <p> 
         <a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a> 
        </p> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-4 col-md-3"> 
      <div class="thumbnail"> 
       <img src="http://www.fakenamegenerator.com/dummyimage/230x230/CCCCCC/000000/1 " class="img-responsive" alt="Responsive image"> 
       <div class="caption"> 
        <h3>Thumbnail label 3</h3> 
        <p> 
         Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda. 
        </p> 
        <p> 
         <a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a> 
        </p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<!--/container-->

（請注意，在這段代碼中可能會有一兩個額外的div，但您並不是非常有幫助，所以一定要檢查是否找到了額外的div，我只是在贏得' t註冊到jsbin）

現在，我們來看看你的JS：

    $(document).ready(function() { 
      var $container = $('.masonry'); 
      $container.imagesLoaded(function() { 
       $container.masonry({ 
        itemSelector: '[class*="col-"]', 
        columnWidth: '[class*="col-"]' 
       }); 
      }); 
     });

，如果你仔細檢查，你會看到這條線：columnWidth: '[class*="col-"]'，這顯然是錯誤的，因爲一個類不能是columnWidth中。這是一個錯誤，並與HTML標記修復修復的東西爲小屏幕，但仍不足以爲大屏幕，所以我們必須加起來的JavaScript的一點點：

$(document).ready(function() { 
    var $container = $('.masonry'); 
    $container.imagesLoaded(function() { 
     $container.masonry({ 
      itemSelector: '[class*="col-"]', 
      columnWidth: container.querySelector('.grid-sizer') 
     }); 
    }); 
});

的.grid-sizer類是一點點已知，很少使用和絕對可愛的砌體特徵，這意味着專門針對響應式網格！所以你補充說，瞧，你的模板開始按照假設工作

來源

2014-09-19 23:29:52 Devin

嗨，謝謝你的幫助。我已經調整好你的代碼了。但用你的jquery，Mansonry不起作用。 – user3279494 2014-09-19 23:54:48

columnWidth：container.querySelector（'。grid-sizer'）是砌體2，砌體3是一個字符串或元素，所以它在這方面是正確的。 – Christina 2014-09-20 00:27:07

我與你的jsbin一起工作，沒有關注你的版本，但它在jsbin中完美工作，所以使用相同的版本。或嘗試更改到jQuery – Devin 2014-09-20 04:10:23

帶砌體插件的Bootstrap

回答

相關問題