Question

我有以下导航栏

enter image description here

正如你可以在中间看到徽标的任何一面，理想情况下我会想要将导航链接均匀地分开，以便看起来像这样

enter image description here

我已经通过使用padding-left和padding-right实现了第二张图片中显示的内容，这对我来说似乎有点像黑客，我用谷歌搜索寻找一个潜在的解决方案，但无济于事。这是我当前的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;

}

**更新**

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

enter image description here

Answer 1

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

例如

 <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);

Answer 2

根据您的需要，这可能会或可能不会被视为一种黑客解决方案，但如果您还需要响应，我可能会选择桌面显示。

是的，我知道。但是它保持了布局的清洁并且工作正常，至少在你的徽标宽度小于容器宽度的20％之前。

HTML：

<nav class="navbar navbar-default">
    <div class="container">
        <div class="collapse navbar-collapse">
            <div class="nav navbar-nav">
                <div>link1</div>
                <div>link2</div>
                <div class="text-center">logo</div>
                <div class="r">link3</div>
                <div class="r">link4</div>
            </divv>
        </div>
    </div>
</nav>

CSS：

.navbar-nav { display: table; }
.navbar-nav > div { display: table-cell; width: 20%; }
.navbar-nav > div.r { text-align: right; }

使用此方法管理的另一件事是，您必须为流体视口构建另一个单独的菜单，并根据屏幕大小在两者之间切换。

对齐导航链接均匀引导3

2 个答案: