Bootstrap：居中导航

Question

Bootstrap：居中导航

3

我在我的测试网站http://ba.nowcommu.myhostpoint.ch/上有一个导航栏，它是：

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-left">
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>

                <li class="page-scroll">
                    <a href="/index.html">Home</a>
                </li>
                <li class="page-scroll">
                    <a href="#ark">Architektur</a>
                </li>

                <li class="page-scroll">
                    <a href="/table.html">Wohnungen</a>
                </li>

                <li class="page-scroll">
                    <a href="#about">Ausstattung</a>
                </li>

                <li class="page-scroll">
                    <a href="#">Lage</a>
                </li>

                <li class="page-scroll">
                    <a href="#">Galerie</a>
                </li>

                <li class="page-scroll">
                    <a href="#">Kontakt</a>
                </li>

            </ul>
             <a class="navbar-brand" href="#page-top"></a>

        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

我该如何做类似这样的效果？

导航栏示例

基本上，我需要将导航居中，将标志放在右侧，句子放在左侧，并为此部分提供形状。 （我的意思是左边的边框切割约25度。）

谢谢您的帮助。

- inwaiting

你能在导航栏上方添加一行吗？ - Lxske

@Lxske 是的，导航栏必须放在那一行里吗？ - inwaiting

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lxske · Answer 1

您可以像下面的代码示例一样，在导航栏上方的单独行中放置所需的内容。第一个col-sm-1是需要进行一些“黑客攻击”的地方。

给第一个col-sm-1设置背景颜色；
对于斜线部分：在此div中添加一个图像，显示此斜线。
为了将其放置在正确的位置并使其适应较小的屏幕，请添加我在示例CSS中放置的属性。

您可能需要将这些行的边距或填充设置为0。

示例

<style>
.dark-bg {
    background-color: #645246;
}
#diagonal {
    display:block; 
    float:right; 
    max-height: 100%; 
    max-width: 100%;
}
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-1" id="dark-bg">
            <img class="diagonal" src="">
        </div>
        <div class="col-sm-4">
            <!-- pay off text -->
        </div>
        <div class="col-sm-3">
        </div>
        <div class="col-sm-3">
            <!--logo-->
        </div>
        <div class="col-sm-1">
        </div>
    </div>
    <div class="row dark-bg">
        <div class="col-sm-10 col-sm-offset-2">
            <nav class="navbar navbar-default navbar-fixed-top">
                <!--........-->
            </nav>
        </div>
    </div>
</div>

你也可以使用CSS渐变来代替这个方法。但是由于渐变应该从一种颜色平滑地过渡到另一种颜色，所以结果不如你想象的那么平滑，也无法像图像hack一样实现。