2017-01-23 4 views
1

ich einen Standard-Boot navbar haben, die wie folgt aussieht:Aktive Nicht-Link navbar Artikel

<nav class="navbar navbar-default"> 
    <div class="container"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href='#'>Item 1</a></li> 
      <li><a href='#'>Item 2</a></li> 
      <li><a href='#'>Item 3</a></li> 
      <li><a href='#'>Item 4</a></li> 
     </ul> 
    </div> 
</nav> 

Aktuelle Abschnitt der Website markiert als active Klasse und es funktioniert gut. Jetzt möchte ich das Navbar Element Item 1 nicht ein Link sein, wenn die aktuelle Seite ist die Item 1 Links zu (weil ein Link, der auf die aktuelle Seite zeigt keinen Punkt), aber ich möchte immer noch es als aktive Seite hervorgehoben werden. Problem ist, sobald ein a Element von einer li Hervorhebung entfernt wird.

Ich habe versucht, fallen einfach den Anker-Tag:

  <li class="active">Item 1</li> 

setzen p.navbar-text um den Artikel:

  <li class="active"><p class='navbar-text'>Item 1</p></li> 

Und einige andere Dinge, keiner arbeitete bisher.

Ich verstehe, dass ich so etwas tun konnte:

  <li class="active"><p class='navbar-text' style='background-color: #e7e7e7; padding: 15px; margin: 0'>Item 1</p></li> 

zu bekommen, was ich will. Auch das scheint zu funktionieren:

  <li class="active"><a>Item 1</a></li> 

aber es ist semantisch falsch.

Ist es möglich zu erreichen, ohne mein eigenes CSS für diesen Fall hinzuzufügen?

Antwort

1

Von dem, was ich sehen kann, gelten die less files for the navbar nur dieses Styling an Ankerelemente. Du könntest über diesen Stil kopieren, um Dinge wie span oder p für deine Verwendung zu übernehmen, aber es gibt keine Möglichkeit mit dem Standard-Bootstrap-CSS, dies anders anzuwenden.

Verwandte Themen