Wie man eine einzelne Reihentabelle innerhalb der bootstrap navbar reaktionsfähig bildet

Question

Ich möchte einen Newsticker in meiner navbar einbeziehen. Um dies zu erreichen, formatierte ich eine einzelne Zeile Tabelle. Ich habe einen Tisch gemacht, weil ich den Titel des Newsticker getrennt von den Nachrichten haben möchte, also kann ich sie in einem -Tag haben und von rechts nach links scrollen wie Newsticker im Fernsehen.

Das Basis-Set up ist wie folgt:

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <ul class="nav navbar-nav"> 
     <li></li> 
     </ul> 
     <ul class="nav navbar-nav"> 
     <li></li> 
     </ul> 
     <ul class="nav navbar-nav pull-right"> 
     <li> 
      <table width="100%" border="0"> 
       <tr> 
        <td> <font color="red">NEWS</font></TD> 
        <td> 
        <marquee>Active now: 13 +++ </marquee> 
        </td> 
       </tr> 
      </table> 
     </li> 
     </ul> 
    </div> 
</nav> 

ich eine jsfiddle zur Visualisierung gemacht: https://jsfiddle.net/gv86j5c9/

Mein Problem ist nun wie folgt: Wie kann ich den Newsticker in Reaktion darauf formatieren, so dass es mit balanciert der Rest der Navigationsmenü-Elemente in einer einzigen Navigationsmenüzeile? Mein Newsticker ist ein wenig zu lang, also wird er unter die Navigationsmenüpunkte gelegt. Ich möchte jedoch, dass es automatisch schrumpft, wenn der Bildschirm nicht groß genug für den Newsticker und die Navigationselemente ist.

Answer 1

Dies ist keine direkte Antwort auf Ihre Frage, aber ich dachte, es würde Ihnen etwas anderes geben, worüber Sie nachdenken könnten, wenn Sie nicht auf den Markierrahmen im Menü beschränkt sind. Aufgrund der Art des alten Marquee-Tags bin ich mir nicht sicher, ob Sie es so funktionieren lassen können, wie Sie es möchten. Darüber hinaus würden Sie extrem begrenzt auf Platz für das Festzelt in der 768px - 992px Bereich gehen Ihre Straße. Es gibt jedoch einige intelligente Leute hier, damit jemand einen Weg für dich finden kann.

Unten ist mein Vorschlag, wenn Sie nicht gegen ein alternatives Aussehen/Lösung sind.

Here is a Demo von dem, was ich auch meine.

Dazu brauchen Sie nur ein paar einfache Änderungen vorzunehmen:

Ihre enjoy-css div
• außerhalb Ihres Header auf Ihrem enjoy-css div auf 0 (zumindest für die Top-Marge Set Bewegen
• Marge)
• für navbar-default 0 als auch Sprechen sie die margin-bottom, so die Nachrichtenticker dagegen
spülen up ist

EDIT/NOTE

Ich möchte auch darauf hinweisen, dass das <marquee> Tag nicht besonders gut zu bedienen ist. Es fehlt an Browser-Unterstützung und ist kein Standard-HTML-Tag.

Diese Funktion ist veraltet. Obwohl es in einigen Browsern immer noch funktionieren kann, wird von seiner Verwendung abgeraten, da es unter jeder Zeit entfernt werden konnte. Versuchen Sie es zu vermeiden.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

Alternativ können Sie CSS3 oder ein Javascript/jQuery-Plug-in verwenden.

CSS3 Beispiel - http://jsfiddle.net/jonathansampson/xxuxd/

jQuery-Plug-in - https://plugins.jquery.com/marquee/