關(guān)鍵要點(diǎn)

• Bootstrap 和 Masonry 都是強(qiáng)大的 Web 開發(fā)工具，但同時使用它們可能會導(dǎo)致布局錯誤，尤其是在隱藏選項(xiàng)卡的情況下。
• Masonry，一個 JavaScript 網(wǎng)格布局庫，即使存在某些瀏覽器兼容性問題，也是創(chuàng)建具有不等長卡片網(wǎng)格的可行方案。
• 將 Bootstrap 選項(xiàng)卡與 Masonry 集成并非易事。默認(rèn)活動選項(xiàng)卡面板內(nèi)的網(wǎng)格可能顯示正確，但單擊選項(xiàng)卡導(dǎo)航鏈接以顯示隱藏面板的內(nèi)容可能會導(dǎo)致網(wǎng)格項(xiàng)目堆疊不正確。
• 布局錯誤的解決方案是在每個面板可見后重新初始化 Masonry 庫。這可以通過使用“shown.bs.tab”事件來實(shí)現(xiàn)。有了這個解決方案，創(chuàng)建出色的平鋪布局就更容易了。

Bootstrap 是最廣泛采用的開源前端框架之一。在您的項(xiàng)目中包含 Bootstrap，您將能夠立即創(chuàng)建響應(yīng)式網(wǎng)頁。如果您嘗試將 Masonry 與 Bootstrap 選項(xiàng)卡小部件（Bootstrap 提供的眾多 JavaScript 組件之一）一起使用，您很可能會遇到某種令人討厭的行為。

在 Masonry 網(wǎng)站上，我們讀到 Masonry 是……

一個 JavaScript 網(wǎng)格布局庫。它的工作原理是根據(jù)可用的垂直空間將元素放置在最佳位置，有點(diǎn)像泥瓦匠將石頭砌在墻上。

我確實(shí)遇到了這個問題，本文重點(diǎn)介紹了問題所在以及您可以采取的解決方法。

Bootstrap 選項(xiàng)卡詳解

Bootstrap 選項(xiàng)卡組件包含兩個關(guān)鍵的相關(guān)部分：選項(xiàng)卡導(dǎo)航元素和多個內(nèi)容面板。頁面加載時，第一個面板應(yīng)用了 .active 類。這使得面板默認(rèn)可見。此類通過 JavaScript 使用，通過選項(xiàng)卡導(dǎo)航鏈接觸發(fā)的事件來切換面板的可見性：如果存在 .active，則面板可見，否則面板隱藏。

如果您有一些 Web 內(nèi)容最好以單獨(dú)的塊呈現(xiàn)，而不是全部擠在一個地方，則 Bootstrap 選項(xiàng)卡組件可能派上用場。

為什么選擇 Masonry？

在某些情況下，每個面板內(nèi)的內(nèi)容適合以響應(yīng)式網(wǎng)格布局顯示。例如，一系列產(chǎn)品、服務(wù)和作品集項(xiàng)目是可以以網(wǎng)格格式顯示的內(nèi)容類型。

但是，如果網(wǎng)格單元格的高度不相等，則可能會發(fā)生如下情況。

兩個內(nèi)容行之間存在很大的間隙，布局看起來已損壞。

如今，Bootstrap 使用基于 Flexbox 的全新卡片組件解決了等寬問題。只需向一組卡片組件添加 card-deck 類就足以實(shí)現(xiàn)等寬列。

如果您希望卡片長度不一致，可以使用 CSS3 多列布局。（畢竟，即使存在一些瀏覽器兼容性問題，總體而言它還是相當(dāng)不錯的。）這是與卡片組件一起提供的新的卡片列選項(xiàng)的基礎(chǔ)。但是，如果您仍然喜歡 Masonry JavaScript 庫開箱即用的精美動畫及其廣泛的瀏覽器兼容性，那么在這種情況下，JavaScript 仍然是一個可行的選擇。

設(shè)置演示頁面

啟動一個演示頁面有助于說明將 Bootstrap 選項(xiàng)卡與 Masonry 集成并非像預(yù)期的那樣簡單。

本文的演示頁面基于 Bootstrap 網(wǎng)站上提供的入門模板。

以下是 Bootstrap 選項(xiàng)卡組件標(biāo)記的框架：

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="http://miracleart.cn/link/6fbb2c2ee065c77a193d0057aab8fa11" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="http://miracleart.cn/link/0bd97cb91b8d57dad18542081fb8f2b1" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="http://miracleart.cn/link/18fb150bb65a5825c83969a59f3febc1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>

nav nav-tabs 類負(fù)責(zé)賦予選項(xiàng)卡其特有的外觀。href 屬性的值形成了單個選項(xiàng)卡與其對應(yīng)的選項(xiàng)卡內(nèi)容之間的關(guān)系。例如，href 值為 http://miracleart.cn/link/6fbb2c2ee065c77a193d0057aab8fa11 會與 id 值為 home 的 div 內(nèi)的選項(xiàng)卡內(nèi)容建立關(guān)系：單擊該特定選項(xiàng)卡將顯示該 div 內(nèi)的內(nèi)容。

此外，請注意 Bootstrap 如何關(guān)注輔助功能屬性，例如 role、aria-controls 等。

以下代碼片段說明了選項(xiàng)卡內(nèi)容的結(jié)構(gòu)：

<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
  <h3>Tab 1 Content</h3>
  <div class="card-group">
    <div class="card">
      <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Getting Bootstrap Tabs to Play Nice with Masonry " />
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Card text here.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card">
      </div>
    <div class="card">
      </div>
  </div>
</div>

只需為上面編寫的選項(xiàng)卡元素對應(yīng)的每個選項(xiàng)卡內(nèi)容部分添加類似的結(jié)構(gòu)即可。

有關(guān)完整代碼，請查看 CodePen 演示。

添加 Masonry 庫

您可以通過單擊“下載 masonry.pkgd.min.js”按鈕從官方網(wǎng)站下載 Masonry。

為了避免布局問題，庫的作者建議將 Masonry 與 imagesLoaded 插件一起使用。

Masonry 不需要 jQuery 庫即可工作。但是，由于 Bootstrap JavaScript 組件已經(jīng)使用 jQuery，因此我將使生活更輕松，并以 jQuery 方式初始化 Masonry。

以下是使用 jQuery 和 imagesLoaded 初始化 Masonry 的代碼片段：

var $container = $('.masonry-container');
$container.imagesLoaded( function () {
  $container.masonry({
    columnWidth: '.card',
    itemSelector: '.card'
  });   
});  

上面的代碼將包裝所有卡片元素的 div 緩存在名為 $container 的變量中。

接下來，使用幾個推薦的選項(xiàng)在 $container 上初始化 Masonry。columnWidth 選項(xiàng)指示水平網(wǎng)格列的寬度。在這里，它通過使用其類名設(shè)置為單個卡片項(xiàng)目的寬度。itemSelector 選項(xiàng)指示要將哪些子元素用作項(xiàng)目元素。在這里，它也設(shè)置為單個卡片項(xiàng)目。

現(xiàn)在是測試代碼的時候了。

哎呀！隱藏面板怎么了？

在不使用 Bootstrap 選項(xiàng)卡的網(wǎng)頁上，上面的代碼運(yùn)行良好。但是，在這種情況下，您很快就會意識到會發(fā)生某種奇怪的行為。

首先，它看起來還不錯，因?yàn)槟J(rèn)活動選項(xiàng)卡面板內(nèi)的網(wǎng)格顯示正確：

但是，如果您單擊選項(xiàng)卡導(dǎo)航鏈接以顯示隱藏面板的內(nèi)容，則會發(fā)生以下情況：

查看源代碼會發(fā)現(xiàn) Masonry 已按預(yù)期觸發(fā)，但每個項(xiàng)目的位置計(jì)算不正確：網(wǎng)格項(xiàng)目像一疊卡片一樣全部堆疊在一起。

而且不止如此。調(diào)整瀏覽器窗口大小會導(dǎo)致網(wǎng)格項(xiàng)目正確地定位自身。

讓我們修復(fù)布局錯誤

由于意外的布局錯誤在單擊選項(xiàng)卡導(dǎo)航鏈接后變得明顯，讓我們更仔細(xì)地研究一下 Bootstrap 選項(xiàng)卡觸發(fā)的事件。

事件列表非常短。這是它。

• show.bs.tab 在選項(xiàng)卡顯示時觸發(fā)，但在新選項(xiàng)卡顯示之前
• shown.bs.tab 在選項(xiàng)卡顯示后觸發(fā)
• hide.bs.tab 在要顯示新選項(xiàng)卡時觸發(fā)（因此之前的活動選項(xiàng)卡將被隱藏）
• hidden.bs.tab 在顯示新選項(xiàng)卡后觸發(fā)（因此之前的活動選項(xiàng)卡被隱藏）。

因?yàn)樵陲@示選項(xiàng)卡后 Masonry 布局會變得混亂，所以選擇 shown.bs.tab 事件。這是您可以將其放在前面代碼片段正下方的代碼：

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="http://miracleart.cn/link/6fbb2c2ee065c77a193d0057aab8fa11" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="http://miracleart.cn/link/0bd97cb91b8d57dad18542081fb8f2b1" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="http://miracleart.cn/link/18fb150bb65a5825c83969a59f3febc1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>

以下是上面代碼中發(fā)生的情況：

jQuery .each() 函數(shù)循環(huán)遍歷每個選項(xiàng)卡導(dǎo)航鏈接并偵聽 shown.bs.tab 事件。當(dāng)事件觸發(fā)時，面板變得可見，并且在所有圖像加載完成后重新初始化 Masonry。

測試代碼

如果您一直在關(guān)注，請?jiān)跒g覽器中啟動您的演示，或嘗試下面的 CodePen 演示以查看結(jié)果：

CodePen 演示鏈接

單擊選項(xiàng)卡導(dǎo)航鏈接，并注意這次網(wǎng)格項(xiàng)目如何均勻地適應(yīng)每個內(nèi)容面板。調(diào)整瀏覽器大小會導(dǎo)致項(xiàng)目以精美的動畫效果正確地重新定位自身。

就是這樣，工作完成了！

結(jié)論

在本文中，我演示了如何將 Bootstrap 選項(xiàng)卡組件與 Masonry JavaScript 庫集成。

這兩個腳本都易于使用且功能強(qiáng)大。但是，將它們放在一起，您將面臨一些影響隱藏選項(xiàng)卡的煩人的布局錯誤。如上所示，訣竅是在每個面板可見后重新初始化 Masonry 庫。

有了這個解決方案，創(chuàng)建出色的平鋪布局將輕而易舉。

祝您 Bootstrap 使用愉快！

Bootstrap 選項(xiàng)卡和 Masonry 的常見問題解答 (FAQ)

(此處應(yīng)插入FAQ部分，內(nèi)容與原文FAQ部分一致，并根據(jù)需要進(jìn)行輕微改寫，保持語義不變)

以上是讓bootstrap選項(xiàng)卡與磚石配合使用的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！