Question

我正在创建一个带有居中导航栏的网站，但徽标也在导航栏中居中。我正在使用Bootstrap和LESS。

问题

在移动设备/平板电脑视图中，折叠导航栏时，菜单项会水平显示而不是垂直显示，看起来不是很好
此外，在移动设备/平板电脑视图中，点击3个条形图时，切换菜单中会出现徽标，看起来更糟糕
切换菜单显示我在移动视图中点击它时，但点击它时它并没有关闭

我的解决方案

我尝试添加媒体查询来显示列表项＆＃34; inline-block＆＃34;对于低于752px的设备但由于某种原因我无法让它工作。

对于徽标，我尝试使用＆＃34; visible-lg＆＃34;这样它只能在大屏幕上看到（并且计划添加一个仅在小屏幕上可见），但它使徽标显示在右侧而不是中心，我似乎无法用CSS更改它，因为它只是留在右边。

我真的希望徽标集中在一个居中的导航栏内，并且现在一直试图找到解决方案，但我写的代码似乎没有任何区别，尤其是菜单项在切换菜单上的显示方式。我可以使用此导航栏吗？我担心我需要重新开始并忘记将徽标置于其中心..任何帮助或建议非常感谢

Here is the HTML for the navbar:

<nav class="navbar navbar-default navbar-fixed-top text-center">


<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">

  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
  <ul class="nav navbar-nav">
    <li><a href="#" data-ajax="false">ABOUT</a></li>
    <li><a href="gallery.php" data-ajax="false">OUR CARS</a></li>
    <li><a href="Prices.php" data-ajax="false">PRICES</a></li>
    <a href="index.php" data-ajax="false"><img src="../assets/images/logo-dark.png" width="250" alt="Logo"></a>
    <li><a href="#" data-ajax="false">PACKAGES</a></li>
    <li><a href="gallery.php" data-ajax="false">BLOG</a></li>
    <li><a href="contact.php" data-ajax="false">CONTACT</a></li>

  </ul>
</div><!-- /.navbar-collapse -->

</div><!-- /.container-fluid -->

</nav>
</nav>

CSS：

#navbar-primary .navbar-nav { 

  max-height:120px;
  width: 100%;
  text-align: center;
li {
display: inline-block;
float: none;
a {
  padding-left: 30px;
  padding-right: 30px;
  padding-top:10px;
}
}

}


@media (max-width: 932px) {
.navbar-default .navbar-nav > li {
float:none;
display: block;
vertical-align: top;
text-align:center;
}
}


// main Header
.header {
#logo { padding:0px 0; }
}

.navbar dropdown-menu > ul 

{
  white-space:normal;
  position:relative;

  }
.downdown-menu {

white-space: normal;
position:relative;

}

.dropdown-menu > li > a {
white-space:normal;
position:relative;

}



// Remove excess borders etc
.navbar-default {
border-top:none;
border-left: 0;
border-right: none;
margin-top:0px;

padding-bottom: 0px;

font-family: 'Open Sans Condensed', sans-serif;
margin-bottom: 0;
font-size:18px;
border-color: transparent;

white-space: normal;

    } 

.navbar-default .navbar-nav > li

{
margin-top:20px;


}

Answer 1

为您的网站试用此导航栏代码或使用这些类响应css

 <!DOCTYPE html>
<html>
<head>

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>

<body>
    <nav class="navbar">
        <div class="container">


<a class="navbar-brand" href="index.php">Shubhsoft</a>

    <div class="navbar-header navbar-right">
        <ul class="nav navbar-nav">
            <li><a href="index.php">Home</a></li>
            <li><a href="index.php">Project</a></li>
            <li><a href="index.php">Client</a></li>
            <li><a href="index.php">Services</a></li>
            <li><a href="index.php">Contact-Us</a></li>
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Wom Dropdown<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="index.php">Link1</a></li>
                    <li><a href="#">Link1</a></li>
                    <li><a href="#">Link1</a></li>
                    <li class="divider"></li>
                    <li <a href="#">Seperated link</a></li>
                    <li class="divider"></li>
                    <li <a href="#"> one more Seperated link</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
<script type="text/javascript" href="js/bootstrap.min.js"></script>
<script type="text/javascript" href="js/jquery.js"></script>

垂直显示折叠的菜单项，其中居中的导航栏和徽标位于其中心（引导程序）

1 个答案: