Question

我试图让我的导航栏成为我网站的中心，但无法集中移动它，当我尝试更改导航时，我一直无处可去，除了中心以外的地方都在移动。< / p>

    <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-center">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li class="page-scroll">
                        <a href="<?php print base_url() ?>">What to Eat</a>
                    </li>
                    <li class="page-scroll">
                        <a href="<?php print base_url() ?>#about">About</a>
                    </li>
                <a class="navbar-brand" href="<?php print base_url() ?>" title-"Where Should I Eat?">
                    <img style="width:100%; max-width:200px; margin-top: -61px;"src="<?php echo base_url() ?>assets/img/logo/WSIE_Header_Logo_Blue.png">
                    </a>
            <!-- Collect the nav links, forms, and other content for toggling -->
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li class="page-scroll">
                        <a href="<?php print base_url() ?>#contact">Contact</a>
                    <li class="page-scroll" data-toggle="modal" data-target="#myModal">
                        <a href="#login">Login</button></a>
                    </li>
                </ul>
            </div>

这是我的css：

    @media(min-width:768px) {
   .navbar-fixed-top {
    padding: 25px;
    -webkit-transition: padding .3s;
    -moz-transition: padding .3s;
    transition: padding .3s;
    margin-left: auto ;
    margin-right: auto ;
}

.navbar-fixed-top .navbar-brand {
    font-size: 2em;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

.navbar-fixed-top.navbar-shrink {
    padding: 10px 0;
}

.navbar-fixed-top.navbar-shrink .navbar-brand {
    font-size: 1.5em;
}
    }

    .navbar {
text-transform: uppercase;
font-family: Lovelo,Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 400;
margin-bottom: 2.5%;
position: absolute;
margin-left: auto ;
margin-right: auto ;
    }

    .navbar a:focus {
outline: 0;
    }

    .navbar .navbar-nav {
letter-spacing: 1px;
margin-left: auto ;
margin-right: auto ;
    }

    .navbar .navbar-nav li a:focus {
outline: 0;
    }

    .navbar-default,
    .navbar-inverse {
border: 0;
    }

我已尝试更改各种导航设置，例如中心，

添加

    margin-left: auto ;
margin-right: auto ;

我的css有很多设置，我尝试了很多其他设置，甚至添加了更多的css设置，但它仍然无法工作

    .navbar .navbar-nav {
letter-spacing: 1px;
display: inline-block;
float: none;
vertical-align: top;
    }

    .navbar .navbar-collapse {

text-align：center; }

Answer 1

你的.navbar-header元素有一个float样式，来自bootstrap的样式。

@media (min-width: 768px)
.navbar-header {
    float: left;
}

只是压倒一切似乎有效。尝试使用相同的媒体查询并将float设置为none：float: none

Answer 2

您可以从navbar-header元素中删除<div class="navbar-header page-scroll">。似乎你不需要那个，并且该课程正在应用float: left，这将使菜单保持在左侧。

无法集中对齐导航栏

2 个答案: