關(guān)鍵要點(diǎn)
- Bootstrap 和 Masonry 都是強(qiáng)大的 Web 開發(fā)工具，但同時(shí)使用它們可能會(huì)導(dǎo)致佈局錯(cuò)誤，尤其是在隱藏選項(xiàng)卡的情況下。
- Masonry，一個(gè) JavaScript 網(wǎng)格佈局庫(kù)，即使存在某些瀏覽器兼容性問(wèn)題，也是創(chuàng)建具有不等長(zhǎng)卡片網(wǎng)格的可行方案。
- 將 Bootstrap 選項(xiàng)卡與 Masonry 集成並非易事。默認(rèn)活動(dòng)選項(xiàng)卡面板內(nèi)的網(wǎng)格可能顯示正確，但單擊選項(xiàng)卡導(dǎo)航鏈接以顯示隱藏面板的內(nèi)容可能會(huì)導(dǎo)致網(wǎng)格項(xiàng)目堆疊不正確。
- 佈局錯(cuò)誤的解決方案是在每個(gè)面板可見後重新初始化 Masonry 庫(kù)。這可以通過(guò)使用“shown.bs.tab”事件來(lái)實(shí)現(xiàn)。有了這個(gè)解決方案，創(chuàng)建出色的平鋪佈局就更容易了。
Bootstrap 是最廣泛採(cǎi)用的開源前端框架之一。在您的項(xiàng)目中包含 Bootstrap，您將能夠立即創(chuàng)建響應(yīng)式網(wǎng)頁(yè)。如果您嘗試將 Masonry 與 Bootstrap 選項(xiàng)卡小部件（Bootstrap 提供的眾多 JavaScript 組件之一）一起使用，您很可能會(huì)遇到某種令人討厭的行為。
在 Masonry 網(wǎng)站上，我們讀到 Masonry 是……
一個(gè) JavaScript 網(wǎng)格佈局庫(kù)。它的工作原理是根據(jù)可用的垂直空間將元素放置在最佳位置，有點(diǎn)像泥瓦匠將石頭砌在牆上。
我確實(shí)遇到了這個(gè)問(wèn)題，本文重點(diǎn)介紹了問(wèn)題所在以及您可以採(cǎi)取的解決方法。
Bootstrap 選項(xiàng)卡詳解
Bootstrap 選項(xiàng)卡組件包含兩個(gè)關(guān)鍵的相關(guān)部分：選項(xiàng)卡導(dǎo)航元素和多個(gè)內(nèi)容面板。頁(yè)面加載時(shí)，第一個(gè)面板應(yīng)用了 .active 類。這使得面板默認(rèn)可見。此類通過(guò) JavaScript 使用，通過(guò)選項(xiàng)卡導(dǎo)航鏈接觸發(fā)的事件來(lái)切換面板的可見性：如果存在 .active，則面板可見，否則面板隱藏。
如果您有一些 Web 內(nèi)容最好以單獨(dú)的塊呈現(xiàn)，而不是全部擠在一個(gè)地方，則 Bootstrap 選項(xiàng)卡組件可能派上用場(chǎng)。
為什麼選擇 Masonry？
在某些情況下，每個(gè)面板內(nèi)的內(nèi)容適合以響應(yīng)式網(wǎng)格佈局顯示。例如，一系列產(chǎn)品、服務(wù)和作品集項(xiàng)目是可以以網(wǎng)格格式顯示的內(nèi)容類型。
但是，如果網(wǎng)格單元格的高度不相等，則可能會(huì)發(fā)生如下情況。
兩個(gè)內(nèi)容行之間存在很大的間隙，佈局看起來(lái)已損壞。
如今，Bootstrap 使用基於 Flexbox 的全新卡片組件解決了等寬問(wèn)題。只需向一組卡片組件添加 card-deck 類就足以實(shí)現(xiàn)等寬列。
如果您希望卡片長(zhǎng)度不一致，可以使用 CSS3 多列佈局。 （畢竟，即使存在一些瀏覽器兼容性問(wèn)題，總體而言它還是相當(dāng)不錯(cuò)的。）這是與卡片組件一起提供的新的卡片列選項(xiàng)的基礎(chǔ)。但是，如果您仍然喜歡 Masonry JavaScript 庫(kù)開箱即用的精美動(dòng)畫及其廣泛的瀏覽器兼容性，那麼在這種情況下，JavaScript 仍然是一個(gè)可行的選擇。
設(shè)置演示頁(yè)面
啟動(dòng)一個(gè)演示頁(yè)面有助於說(shuō)明將 Bootstrap 選項(xiàng)卡與 Masonry 集成並非像預(yù)期的那樣簡(jiǎn)單。
本文的演示頁(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://ipnx.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://ipnx.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://ipnx.cn/link/18fb150bb65a5825c83969a59f3febc1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
nav nav-tabs 類負(fù)責(zé)賦予選項(xiàng)卡其特有的外觀。 href 屬性的值形成了單個(gè)選項(xiàng)卡與其對(duì)應(yīng)的選項(xiàng)卡內(nèi)容之間的關(guān)係。例如，href 值為 http://ipnx.cn/link/6fbb2c2ee065c77a193d0057aab8fa11 會(huì)與 id 值為 home 的 div 內(nèi)的選項(xiàng)卡內(nèi)容建立關(guān)係：?jiǎn)螕粼撎囟ㄟx項(xiàng)卡將顯示該 div 內(nèi)的內(nèi)容。
此外，請(qǐng)注意 Bootstrap 如何關(guān)注輔助功能屬性，例如 role、aria-controls 等。
以下代碼片段說(shuō)明了選項(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)卡元素對(duì)應(yīng)的每個(gè)選項(xiàng)卡內(nèi)容部分添加類似的結(jié)構(gòu)即可。
有關(guān)完整代碼，請(qǐng)查看 CodePen 演示。
添加 Masonry 庫(kù)
您可以通過(guò)單擊“下載 masonry.pkgd.min.js”按鈕從官方網(wǎng)站下載 Masonry。
為了避免佈局問(wèn)題，庫(kù)的作者建議將 Masonry 與 imagesLoaded 插件一起使用。
Masonry 不需要 jQuery 庫(kù)即可工作。但是，由於 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 的變量中。
接下來(lái)，使用幾個(gè)推薦的選項(xiàng)在 $container 上初始化 Masonry。 columnWidth 選項(xiàng)指示水平網(wǎng)格列的寬度。在這裡，它通過(guò)使用其類名設(shè)置為單個(gè)卡片項(xiàng)目的寬度。 itemSelector 選項(xiàng)指示要將哪些子元素用作項(xiàng)目元素。在這裡，它也設(shè)置為單個(gè)卡片項(xiàng)目。
現(xiàn)在是測(cè)試代碼的時(shí)候了。
哎呀！隱藏面板怎麼了？
在不使用 Bootstrap 選項(xiàng)卡的網(wǎng)頁(yè)上，上面的代碼運(yùn)行良好。但是，在這種情況下，您很快就會(huì)意識(shí)到會(huì)發(fā)生某種奇怪的行為。
首先，它看起來(lái)還不錯(cuò)，因?yàn)槟J(rèn)活動(dòng)選項(xiàng)卡面板內(nèi)的網(wǎng)格顯示正確：
但是，如果您單擊選項(xiàng)卡導(dǎo)航鏈接以顯示隱藏面板的內(nèi)容，則會(huì)發(fā)生以下情況：
查看源代碼會(huì)發(fā)現(xiàn) Masonry 已按預(yù)期觸發(fā)，但每個(gè)項(xiàng)目的位置計(jì)算不正確：網(wǎng)格項(xiàng)目像一疊卡片一樣全部堆疊在一起。
而且不止如此。調(diào)整瀏覽器窗口大小會(huì)導(dǎo)致網(wǎng)格項(xiàng)目正確地定位自身。
讓我們修復(fù)佈局錯(cuò)誤
由於意外的佈局錯(cuò)誤在單擊選項(xiàng)卡導(dǎo)航鏈接後變得明顯，讓我們更仔細(xì)地研究一下 Bootstrap 選項(xiàng)卡觸發(fā)的事件。
事件列表非常短。這是它。
- show.bs.tab 在選項(xiàng)卡顯示時(shí)觸發(fā)，但在新選項(xiàng)卡顯示之前
- shown.bs.tab 在選項(xiàng)卡顯示後觸發(fā)
- hide.bs.tab 在要顯示新選項(xiàng)卡時(shí)觸發(fā)（因此之前的活動(dòng)選項(xiàng)卡將被隱藏）
- hidden.bs.tab 在顯示新選項(xiàng)卡後觸發(fā)（因此之前的活動(dòng)選項(xiàng)卡被隱藏）。
因?yàn)樵陲@示選項(xiàng)卡後 Masonry 佈局會(huì)變得混亂，所以選擇 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://ipnx.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://ipnx.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://ipnx.cn/link/18fb150bb65a5825c83969a59f3febc1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
以下是上面代碼中發(fā)生的情況：
jQuery .each() 函數(shù)循環(huán)遍歷每個(gè)選項(xiàng)卡導(dǎo)航鏈接並偵聽 shown.bs.tab 事件。當(dāng)事件觸發(fā)時(shí)，面板變得可見，並且在所有圖像加載完成後重新初始化 Masonry。
測(cè)試代碼
如果您一直在關(guān)注，請(qǐng)?jiān)跒g覽器中啟動(dòng)您的演示，或嘗試下面的 CodePen 演示以查看結(jié)果：
單擊選項(xiàng)卡導(dǎo)航鏈接，並註意這次網(wǎng)格項(xiàng)目如何均勻地適應(yīng)每個(gè)內(nèi)容面板。調(diào)整瀏覽器大小會(huì)導(dǎo)致項(xiàng)目以精美的動(dòng)畫效果正確地重新定位自身。
就是這樣，工作完成了！
結(jié)論
在本文中，我演示瞭如何將 Bootstrap 選項(xiàng)卡組件與 Masonry JavaScript 庫(kù)集成。
這兩個(gè)腳本都易於使用且功能強(qiáng)大。但是，將它們放在一起，您將面臨一些影響隱藏選項(xiàng)卡的煩人的佈局錯(cuò)誤。如上所示，訣竅是在每個(gè)面板可見後重新初始化 Masonry 庫(kù)。
有了這個(gè)解決方案，創(chuàng)建出色的平鋪佈局將輕而易舉。
祝您 Bootstrap 使用愉快！
Bootstrap 選項(xiàng)卡和 Masonry 的常見問(wèn)題解答 (FAQ)
(此處應(yīng)插入FAQ部分，內(nèi)容與原文FAQ部分一致，並根據(jù)需要進(jìn)行輕微改寫，保持語(yǔ)義不變)
以上是讓bootstrap選項(xiàng)卡與磚石配合使用的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁(yè)開發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
CSS教程，用於創(chuàng)建加載旋轉(zhuǎn)器和動(dòng)畫
Jul 07, 2025 am 12:07 AM
創(chuàng)建CSS加載旋轉(zhuǎn)器的方法有三種：1.使用邊框的基本旋轉(zhuǎn)器，通過(guò)HTML和CSS實(shí)現(xiàn)簡(jiǎn)單動(dòng)畫；2.使用多個(gè)點(diǎn)的自定義旋轉(zhuǎn)器，通過(guò)不同延遲時(shí)間實(shí)現(xiàn)跳動(dòng)效果；3.在按鈕中添加旋轉(zhuǎn)器，通過(guò)JavaScript切換類來(lái)顯示加載狀態(tài)。每種方法都強(qiáng)調(diào)了設(shè)計(jì)細(xì)節(jié)如顏色、大小、可訪問(wèn)性和性能優(yōu)化的重要性，以提升用戶體驗(yàn)。
解決CSS瀏覽器兼容性問(wèn)題和前綴
Jul 07, 2025 am 01:44 AM
處理CSS瀏覽器兼容性和前綴問(wèn)題需理解瀏覽器支持差異並合理使用廠商前綴。 1.了解常見問(wèn)題如Flexbox、Grid支持不一，position:sticky失效，動(dòng)畫表現(xiàn)不同；2.查閱CanIuse確認(rèn)特性支持情況；3.正確使用-webkit-、-moz-、-ms-、-o-等廠商前綴；4.推薦使用Autoprefixer自動(dòng)添加前綴；5.安裝PostCSS並配置browserslist指定目標(biāo)瀏覽器；6.構(gòu)建時(shí)自動(dòng)處理兼容性；7.老項(xiàng)目可用Modernizr檢測(cè)特性；8.不必追求所有瀏覽器一致，確
顯示：內(nèi)聯(lián)，顯示：塊和顯示：內(nèi)聯(lián)塊之間有什麼區(qū)別？
Jul 11, 2025 am 03:25 AM
Themaindifferencesbetweendisplay:inline,block,andinline-blockinHTML/CSSarelayoutbehavior,spaceusage,andstylingcontrol.1.Inlineelementsflowwithtext,don’tstartonnewlines,ignorewidth/height,andonlyapplyhorizo????ntalpadding/margins—idealforinlinetextstyling
使用CSS剪輯路徑創(chuàng)建自定義形狀
Jul 09, 2025 am 01:29 AM
使用CSS的clip-path屬性可以裁剪元素為自定義形狀，如三角形、圓形缺口、多邊形等，無(wú)需依賴圖片或SVG。其優(yōu)勢(shì)包括：1.支持circle、ellipse、polygon等多種基本形狀；2.可響應(yīng)式調(diào)整，適配移動(dòng)端；3.易於動(dòng)畫化，可結(jié)合hover或JavaScript實(shí)現(xiàn)動(dòng)態(tài)效果；4.不影響佈局流，僅裁剪顯示區(qū)域。常見用法如圓形裁剪clip-path:circle(50pxatcenter)和三角形裁剪clip-path:polygon(50%0%,1000%,00%)。注意
造型與CSS不同訪問(wèn)的鏈接
Jul 11, 2025 am 03:26 AM
設(shè)置訪問(wèn)過(guò)鏈接的樣式能提升用戶體驗(yàn)，尤其在內(nèi)容密集型網(wǎng)站中幫助用戶更好導(dǎo)航。 1.使用CSS的:visited偽類可定義已訪問(wèn)鏈接樣式，如顏色變化；2.注意瀏覽器出於隱私限制僅允許修改部分屬性；3.顏色選擇應(yīng)與整體風(fēng)格協(xié)調(diào)，避免突兀；4.移動(dòng)端可能不顯示該效果，建議結(jié)合其他視覺提示如icon輔助標(biāo)識(shí)。
CSS繪畫API是什麼？
Jul 04, 2025 am 02:16 AM
thecsspaintingapienablesdemimageGenerationinCsssingJavascript.1.developersCreateApaintWorkletClassWithaPaint（）method.2.theyregisteritviaregisterpaint（）。 3.thecustompAntFunctionSthenusitySthenusedisthenusedisthenusedIncerspropertieslikeBacknockforg-image-image.thisallows.thisallowsforderforderynamecvis
如何使用CSS創(chuàng)建響應(yīng)式圖像？
Jul 15, 2025 am 01:10 AM
要使用CSS創(chuàng)建響應(yīng)式圖片，主要可通過(guò)以下方法實(shí)現(xiàn)：1.使用max-width:100%和height:auto讓圖片在保持比例的同時(shí)自適應(yīng)容器寬度；2.結(jié)合HTML的srcset和sizes屬性智能加載適配不同屏幕的圖片源；3.利用object-fit和object-position控製圖片裁剪與焦點(diǎn)展示。這些方法共同確保圖片在不同設(shè)備上清晰、美觀地呈現(xiàn)。
什麼是常見的CSS瀏覽器不一致？
Jul 26, 2025 am 07:04 AM
不同瀏覽器對(duì)CSS解析存在差異，導(dǎo)致顯示效果不一致，主要包括默認(rèn)樣式差異、盒模型計(jì)算方式、Flexbox和Grid佈局支持程度及某些CSS屬性行為不一致。 1.默認(rèn)樣式處理不一致，解決方法是使用CSSReset或Normalize.css統(tǒng)一初始樣式；2.舊版IE的盒模型計(jì)算方式不同，建議統(tǒng)一使用box-sizing:border-box；3.Flexbox和Grid在邊緣情況或舊版本中表現(xiàn)有差異，應(yīng)多測(cè)試並使用Autoprefixer；4.某些CSS屬性行為不一致，需查閱CanIuse並提供降級(jí)
