So deaktivieren Sie das Stapeln von mit Bootstrap ausgerichteten Registerkarten auf kleinen Bildschirmen

ich habe gesehendieser BeitragAls neuer Benutzer kann ich jedoch keinen Kommentar abgeben, um eine Klarstellung zu erbitten.

Ich verwende die gerechtfertigten Navigationsregisterkarten in Bootstrap und möchte nicht, dass sie auf kleinen Bildschirmen gestapelt werden, da ich nur 2 Registerkarten habe. Ich möchte, dass sie nebeneinander bleiben, nur verkleinern, um auf den Bildschirm zu passen. Das habe ich:

    <!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" id="myTab">
  <li class="active"><a href="#ratings" data-toggle="tab">Ratings</a></li>
  <li><a href="#reviews" data-toggle="tab">Reviews</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="ratings">This is a rating section</div>
  <div class="tab-pane" id="reviews">This is for reviews. There should be some styling here.</div>
</div>

Wie der zugehörige Beitrag die Verwendung von Medienabfragen nahelegt, kann ich das scheinbar nicht zum Laufen bringen. Ich hatte versucht, die folgenden Einstellungen für kleine Bildschirme vorzunehmen:

    @media (max-width: 768px) {
  .nav-justified > li {display: table-cell;}
}

Ich bin mir nicht sicher, was ich falsch mache, daher wird jede Hilfe sehr geschätzt.

Antworten auf die Frage(9)

Ihre Antwort auf die Frage