html - Bootstrap : center navigation

Question

我的测试网站上有一个导航栏 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>

我怎么能做这样的事情？

Navigation Example

基本上，我必须将导航居中，将 Logo 放在右侧，将句子放在左侧，并为该部分赋予该形状。 (我的意思是左边框切割 25 度左右。)

多谢指教

Answer 1

您可以将所需的内容放在导航栏上方的单独行中，如我的以下代码示例所示。第一个 col-sm-1 是您需要进行一些“修改”的地方。

1. 给第一个col-sm-1设置背景颜色；
2. 对于对 Angular 线部分:向该 div 添加图像，显示该对 Angular 线。
3. 要将它放在正确的位置并使其适应较小的屏幕，请添加我在示例的 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 渐变来代替它。但是，由于渐变应该从一种颜色平滑地过渡到另一种颜色，因此结果并不像您希望的那样平滑，也不像您通过图像破解可以实现的那样平滑。