一起使用Bootstrap和基礎？

Question

我使用twitter引導佈局和CSS。但我喜歡通過bootstrap提供的基礎頂級欄導航。我試圖使用我的html（使用bootstrap構建）內部的頂部條碼，它會弄亂佈局。這並不奇怪，因爲它們都廣泛地依賴名爲「row」的類並且它們具有不同的屬性。

我可以考慮的選項之一是重寫行類中的一些如何在我的樣式表中，但這將是一個工作太多，看起來不正確。

其他選項可能使用iframe。

有沒有其他方式可以解決這個問題？

Answer 1

對此使用iframe是一個壞主意。如果您喜歡Foundation頂部欄的樣式，只需將這些樣式複製到樣式表中的自定義類中即可。

請注意，您可能必須重寫頂部欄的一些Bootstrap默認樣式才能正確使用它。

Answer 2

理想情況下，您只需使用Foundation的頂欄CSS和JS代碼，因爲這是您要使用的唯一組件。 。Here is the SCSS文件（在變量依賴關係中_settings.scss聲明或者您可以使用generated CSS code

如果您仍然需要使用.row，只複製.row造型並將其命名爲不同的即：

/* The Grid ---------------------- */ 
.foundation-row { width: 1000px; max-width: 100%; min-width: 768px; margin: 0 auto; } 

最後，dont't忘記包含jquery.foundation.topbar.js文件並調用

$(document).foundationTopBar();

Answer 3

老問題，但壽如果有人正在尋找一個無縫的解決方案，我將分享最新的內容：Web組件

這是一個更復雜的主題，但它允許您在完全隔離的Shadow DOM中創建小部件，而不會覆蓋任何東西。詳細瞭解它 here和here。然後，你就可以做這樣的事情：

<template id="templateContent"> 
    <style> @import "css/generalStyle.css"; </style> 
</template> 

從this answer