2

タイトルで述べたように、Bootstrap で affix を使用して水平ツールバーを作成しようとしています。ツールバーが水平で接辞を使用している限り、ツールバーがウェル、ナビゲーション、またはパネルにラップされていてもかまいません。

私は現在井戸を使用しています。いくつかの Bootstrap コンポーネントを試してみましたが、結果はまったく同じです。

ツールバーが「固定」状態でない場合は正常に動作し、適切な幅などがありますが、固定が開始されると幅が失われposition: fixedます。私の知る限り、固定位置の要素は特定の幅を提供する必要があり、それで問題ありません。私の問題は、ツールバーが「固定」される前と同じ幅を維持する正確で信頼できる方法を見つけることができないことです。デバイスの解像度に関しては異なります。

「固定」ツールバーに適切な幅を提供するにはどうすればよいですか? 幅を指定しないと、ツールバーが小さすぎます。幅 100% を指定すると、ツールバーが右側にオーバーフローし、一部の UI 要素が失われます。

これは、私が抱えているのとまったく同じ問題を再現する例です: http://www.bootply.com/DAOHegIaTl。

これは、接辞に使用される CSS です。

@media (max-width: 767px) {
  #content-library-toolbar.affix
  {
    top: 100px;
    z-index:1;
  }
}

@media (min-width: 768px) {
  #content-library-toolbar.affix
  {
    top: 50px;
    z-index:1;
  }
}
4

1 に答える 1

2

fixedCSSposition:fixedはページ フローから要素を削除するため、これは要素に関する一般的な問題です。要素は、そのfixedコンテナーおよび隣接する要素に対して相対的ではなくなりました。

あなたの場合、fixedツールバー要素の幅が問題です。jQuery を使用して、affixプラグイン イベントにフックすることができます。最初のイベントは、ツールバーが固定される直前にツールバーの幅を取得し、2 番目のイベントは、ツールバーが固定されると幅を設定します。

var myWidth;
$('#content-library-toolbar').bind('affix.bs.affix', function () {
  myWidth = $(this).width();
});

$('#content-library-toolbar').bind('affixed.bs.affix', function () {  
  $(this).width(myWidth);
});

デモ: http://www.bootply.com/oc8MgNC2Od

于 2014-05-02T15:17:01.720 に答える