Question

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

enter image description here

以下是我当前标头

的方式

enter image description here

这是我目前的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;
}

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

enter image description here

更新后的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;
}

我为任何感觉自己想要参与其中的人添加了测试图像，任何解决方案/建议都将受到高度赞赏。

enter image description here

Answer 1

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

Answer 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>

问题设计bootstrap导航栏

2 个答案: