2

レイアウトと CSS に Twitter ブートストラップを使用しています。しかし、ブートストラップが提供するものよりも、基本的なトップ バー ナビゲーションが気に入っています。HTML（ブートストラップで構築）内でトップバーコードを使用しようとしましたが、レイアウトが台無しになりました。どちらも「row」という名前のクラスに広く依存しており、異なるプロパティを持っているため、これは驚くべきことではありません。

私が考えることができるオプションの 1 つは、私のスタイル シートで行クラスを何らかの方法でオーバーライドすることですが、それはあまりにも多くの作業になり、正しくないようです。

他のオプションは、iframe を使用している可能性があります。

この問題を解決できる他の方法はありますか?

4

3 に答える 3

3

理想的には、FoundationのトップバーCSSおよびJSコードのみを使用する必要があります。これは、使用するコンポーネントがそれだけだからです。これがSCSSファイルです（_settings.scssで宣言された変数に依存しています。または、生成されたCSSコードを使用できます。

それでも使用する必要がある場合は、スタイルを.rowコピーして別の名前を付けてください。.rowすなわち：

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

jquery.foundation.topbar.js最後に、ファイルを含めて呼び出すことを忘れないでください

$(document).foundationTopBar();

于 2013-02-11T09:27:09.473 に答える
1

古い質問ですが、誰かがシームレスなソリューションを探している場合は、最新のものを共有すると思いました: Web Components

これは少し複雑なテーマですが、完全に分離された Shadow DOM 内で何もオーバーライドせずにウィジェットを作成できるようになります。詳細については、 こちらとこちらをご覧ください。次に、次のようなことができるようになります。

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

この回答から取得

于 2015-03-04T10:29:00.280 に答える
0

これに iframe を使用するのは悪い考えです。Foundation トップ バーのスタイルが気に入った場合は、それらのスタイルをスタイルシートのカスタム クラスにコピーするだけです。

トップバーを正しく表示するには、Bootstrap のデフォルト スタイルの一部をオーバーライドする必要がある場合があることに注意してください。

于 2013-02-08T23:27:45.237 に答える