3

プロジェクトで Bootstrap を使用しており、次の HTML があります (現在ここに表示されています)。

<nav class='navbar navbar-default' role='navigation'>
  <div class='navbar-header'>
    <button class='navbar-toggle' data-target='#header-navbar' data-toggle='collapse' type='button'>
      <span class='sr-only'>Toggle navigation</span>
      <span class='icon-bar'></span>
      <span class='icon-bar'></span>
      <span class='icon-bar'></span>
    </button>
    <a class="navbar-brand" href="http://ea-skillshare.herokuapp.com/">Sharing Is Caring</a>
  </div>
  ...
</nav>

「Sharing Is Caring」というテキストのリンクをクリックしようとしても、何も起こりません。ただし、リンクを選択して、タブ キーを使用して強調表示し、Enter キーを押すと、リンクが指す URL に移動することができます。

ここに画像の説明を入力

以下のように、リンクはメニューが折りたたまれている場合にも機能します。

ここに画像の説明を入力

リンクを常に機能させるにはどうすればよいですか?

4

5 に答える 5

8

問題の解決策は非常に簡単です。問題は、「navbar-header」クラスに値「left」を持つプロパティ :float があるためです。私が知っているこの問題を解決するには、少なくとも 2 つの方法があります。1).「navbar-right」クラスをnavbar-header の直後の次の div。

<nav class='navbar navbar-default' role='navigation'>
<div class='navbar-header'>
    <button class='navbar-toggle' data-target='#header-navbar' data-toggle='collapse' type='button'>
        <span class='sr-only'>Toggle navigation</span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
    </button>
    <a class="navbar-brand" href="http://ea-skillshare.herokuapp.com/">Sharing Is Caring</a>
</div>
<div class="collapse navbar-collapse navbar-right" collapse="!isCollapsed">
    ...
</div>

2)。値が「右」の float プロパティを次の div に自分で追加します。2 番目の解決策では、折りたたまれたメニューが右にフロートするため、とにかく注意してください。

于 2014-09-24T23:06:52.980 に答える
2

上記の解決策がうまくいかない場合は、同様の問題がありposition: relative、navbar-header 要素から追加されたクラスを削除することで解決できました。

背景: ブートストラップ 3.2.0 を使用していましたが、navbar-brand リンクは、navbar が折りたたまれている場合にのみ機能します。position: absoluteの端と下に沿って配置できるように、ナビゲーションバーメニューを指定しまし.containerたposition:relative。ただし、position: relativenavbar-header 要素にも を追加しましたが、これは不要で、リンクが壊れていました。

于 2014-07-30T19:41:37.403 に答える