對齊標籤不堅守寬度

我正在使用Bootstrap 3，並且希望使標籤在完整內容上對齊。所以我使用導航標籤，你可以在下面的內容中看到。它可能看起來有點奇怪，因爲我使用的是Angular 4，代碼是從開發工具中複製的。對齊標籤不堅守寬度

<ul class="nav nav-justified nav-tabs nav-tabs-justified"> 
    <li class="nav-item" ng-reflect-ng-class="nav-item,"> 
    <a class="nav-link active" href="javascript:void(0);"> 
     <span _ngcontent-c5="">Artikel</span> 
    </a> 
    </li><li class="nav-item" ng-reflect-ng-class="nav-item,"> 
     <a class="nav-link" href="javascript:void(0);"> 
     <span>Rezeptierung/Ökonomie</span> 
     <!--bindings={}--> 
     </a> 
    </li><li class="nav-item" ng-reflect-ng-class="nav-item,"> 
     <a class="nav-link" href="javascript:void(0);"> 
     <span>Teilbarkeit</span> 
     <!--bindings={}--> 
     </a> 
    </li><li class="nav-item" ng-reflect-ng-class="nav-item,"> 
     <a class="nav-link" href="javascript:void(0);"> 
     <span>Zusammensetzung</span> 
     <!--bindings={}--> 
     </a> 
    </li><li class="nav-item" ng-reflect-ng-class="nav-item,"> 
     <a class="nav-link" href="javascript:void(0);"> 
     <span>Kurzinformation</span> 
     <!--bindings={}--> 
     </a> 
    </li><li class="nav-item" ng-reflect-ng-class="nav-item,"> 
     <a class="nav-link" href="javascript:void(0);"> 
     <span>ATC/IND</span> 
     <!--bindings={}--> 
     </a> 
    </li><li class="nav-item" ng-reflect-ng-class="nav-item,"> 
     <a class="nav-link" href="javascript:void(0);"> 
     <span>Lagerung/Abgabe</span> 
     <!--bindings={}--> 
     </a> 
    </li><li class="nav-item" ng-reflect-ng-class="nav-item,"> 
     <a class="nav-link" href="javascript:void(0);"> 
     <span>Hersteller</span> 
     <!--bindings={}--> 
     </a> 
    </li><li class="nav-item" ng-reflect-ng-class="nav-item,"> 
     <a class="nav-link" href="javascript:void(0);"> 
     <span>Fachinformation</span> 
     <!--bindings={}--> 
     </a> 
    </li> 
</ul>

而這個代碼的輸出是非常正常的，我認爲，但只有當它是全尺寸。如果我正在調整頁面大小，那麼它看起來像這樣： Image

在右側，您可以看到內容的結尾，然後是標籤溢出。

有人知道如何解決這個問題嗎？

來源

2017-06-21 user3599233

我結束了與jQuery解決這個。，因爲我有9個標籤總的來說，我說OK：

if $(window).width() <= 1473 { // ever third li element add a new </ul><ul> Element, so it will create a new line. } else { // remove </ul><ul> to have the full width. }

來源

2017-06-29 10:26:19 user3599233

引導推薦：

<nav class="navbar navbar-default"> 
 
    <div class="container"> 
 
     <!-- Ul tag --> 
 
    </div> 
 
</nav>

來源

2017-06-21 07:52:55 ISanchez

不同的是，我沒有在導航使用它。我在我的Html-body中使用它。 – user3599233

你有絕對位置的圖像嗎？ – ISanchez

我的父母div已經應用了這個CSS： .inlineInfo { bottom：0px; 身高：55vh; background-color：white; display：none; margin-top：12.5px; 職位：固定; z-index：1010; border：5px solid＃e7e7e7; vertical-align：middle; padding：10px; }，但我沒有。圖像在標籤之外的另一個div – user3599233

對齊標籤不堅守寬度

回答

相關問題