對齊引導菜單

我嘗試做一個網站標題。徽標寬度= 405px。還有一個標題和一個菜單，它的寬度相同（100％-405px）。對齊引導菜單

是這樣的：

菜單應合理 ...並apparentrly這不是通過引導支持...

我試圖用彎曲，但爲不支持IE 11 ...

這裏是my fiddle code和主要提取：

<div class="cotnainer-fluid"> 

    <div class="header"> 
    <div class="logo"></div> 
    <div class="top-header"> welcome and ...login right</div> 
    <div class="menu"> 
     <nav class="navbar navbar-default"> ... </nav> 
    </div> 
    </div> 

    <div class="main container">...</div> 
</div>

我該如何解決這個問題：a）至少Chrome兼容，b）IE11兼容。

來源

2017-09-05 Serge

https://getbootstrap.com/docs/3.3/components/#nav-justified – 99tharun

@ 99tharun，它在鏈接文檔中說：'目前不支持合理的導航欄導航鏈接.' – Serge

該.logo將需要一個display: inline-block，以便它不強制其下的其他元素（默認情況下大多數瀏覽器的元素是display: block）。

接下來，我建議將.top-header和.menu包裹在div元素中，您可以在其中應用css calc以及左拉/右拉。

只是爲了確定.top-header和.menu填充新容器，我還添加了width: 100%。

這裏是updated jsFiddle。

請注意，包含「登錄」鏈接的鏈接和列表項目現在已被覆蓋，但這可能是一個單獨的問題。

來源

2017-09-05 18:51:57 jhawes

對齊引導菜單

回答

相關問題