html - 均匀对齐导航链接 bootstrap 3

Question

我有以下导航栏

正如您在 Logo 的两边中间看到的那样，理想情况下有大量的空白空间我想将导航链接均匀地隔开，这样它看起来像这样

我已经通过使用 padding-left 和 padding-right 实现了第二张图片中显示的内容，这对我来说似乎有点 hack，我已经在 google 上寻找可能的解决方案，但无济于事。这是我当前的 html，您可以看到我输入的填充。

 <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="glyphicon glyphicon-chevron-down pull-right"></span>
            </button>
        </div>

        <a class="navbar-brand visible-lg visible-md hidden-sm hidden-xs"
           style="background-image: url('/Content/Images/logo.png'); background-repeat: no-repeat; height: 94px; width: 301px; left: calc(50% - 148px); "
           href='@Url.Action("Index", "Home")'></a>

        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav navbar-left">
                <li id="lnkProducts">@Html.ActionLink("PRODUCTS", "Products", "Products")</li>
                <li><a href="/flavour-lab" style="font-family: Foco-Regular; padding-left: 35%" class="paddingLeft">FLAVOUR LAB</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="/our-story" style=" font-family: Foco-Regular;padding-right:45%">OUR STORY</a></li>
                <li id="lnkVisitUs"><a href="#" target="_blank" style=" font-family: Foco-Regular">VISIT US: <b>f</b></a></li>
                <li id="lnkContactUs" class="visible-xs-block">@Html.ActionLink("CONTACT US", "Contact", "Contact") </li>
            </ul>
        </div>
    </div>
</nav>

谢谢

** 更新**

根据要求，请参阅下面的左右导航栏 CSS

   .navbar-left {
    float: left !important;
}

.navbar-right {
    float: right !important;

}

** 更新**

这是最小化到移动屏幕时显示的内容

Answer 1

我认为您需要为 .navbar-left 和 .navbar-right 添加宽度才能执行此操作。然后将 float 添加到内部元素。

例如

 <ul class="nav navbar-nav navbar-left" style="width:380px">
        <li style="float:left" id="lnkProducts">@Html.ActionLink("PRODUCTS", "Products", "Products")</li>
         <li><a href="/flavour-lab" style="font-family: Foco-Regular; float:right" class="paddingLeft">FLAVOUR LAB</a></li>
     </ul>

更新 -

如果在 PX 中为您的 navbar 提供宽度在移动设备中不起作用，您可以使用 css 中的 calc 函数来提供宽度。如果中间图标的大小是 301px*91px，请为左右导航栏使用以下 width

width: -webkit-calc(50% - 150px);