问题设计引导导航栏答案

【问题标题】：Issue designing bootstrap nav bar问题设计引导导航栏
【发布时间】：2015-01-20 05:53:08
【问题描述】：

我们正在设计一个新网站，设计师创建了如下导航栏，可以看到曲线（这是我要破解的！）

下面是我当前的标题是怎样的

这是我当前的 HTML，我还必须为品牌创建一个新的 CSS 类，以便它出现在屏幕中间

<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="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <a class="navbar-brand" href='@Url.Action("Index", "Home")'>LOGO HERE</a>
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="#">PRODUCTS</a></li>
                <li><a href="#">FLAVOUR LAB</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">OUR STORY</a></li>
                <li><a href="#">VISIT US ON LIFE INVADER</a></li>
            </ul>
        </div>
    </div>
</nav>

而css如下

.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}

当我创建一个测试图像并尝试应用样式即背景图像时，我得到以下输出，您可以看到带有一半曲线的徽标显示并出现在屏幕的左侧。

更新后的 CSS

.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
background-image: url('/Content/Images/TempLogoExample.png');
background-repeat: no-repeat;
z-index: 9999;
}

我附上了一张测试图片，供任何想要尝试的人使用，任何解决方案/建议将不胜感激。

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 navigation

【解决方案1】：

因为您设置了Left:0，所以它出现在左角。尝试使用百分比标记更改它。例如：-left: 45%;将适用于您的情况。如果不尝试更改百分比值。

【讨论】：

我已经应用了 45%，它已经将它洗牌了，但我仍然只看到图像的一半？我怎样才能把它带到导航的顶部
试试这个 .navbar { position: relative; } .navbar-brand{ 位置：绝对；左：50%；左边距：-50px ！重要； /* 50% 的 logo 宽度 */ display: block; }

【解决方案2】：

我建议使用不同的标记方法来实现这一点。为什么不能在主要部分使用列网格，然后将您的设计带入内部。下面的标记将帮助您实现这一目标。

<div class="collapse navbar-collapse" id="navbar-collapse-1">
                <div class="col-xs-4">
                    <ul class="nav navbar-nav navbar-left">
                        <li><a href="#">PRODUCTS</a></li>
                        <li><a href="#">FLAVOUR LAB</a></li>
                    </ul>
                </div>
                <div class="col-xs-4">
                    <a class="navbar-brand" href='@Url.Action("Index", "Home")'>LOGO HERE</a>
                </div>
                <div class="col-xs-4">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">OUR STORY</a></li>
                        <li><a href="#">VISIT US ON LIFE INVADER</a></li>
                    </ul>
                </div>
            </div>

【讨论】：