个人中心
gpt4 book ai didi

html - 垂直显示折叠的菜单项，导航栏居中， Logo 居中( Bootstrap )

转载 作者：行者123 更新时间：2023-11-28 04:36:00 32 4
gpt4 key购买 nike

我正在制作一个导航栏居中的网站，但 Logo 也在导航栏内居中。我正在使用 Bootstrap 和 LESS。

问题

  1. 在移动设备/平板电脑 View 中，当导航栏折叠时，菜单项水平显示而不是垂直显示，这看起来不太好

  2. 此外，在移动设备/平板电脑 View 中，当您单击 3 个栏时， Logo 会出现在切换菜单内，看起来更糟

  3. 当我在移动 View 中点击它时切换菜单显示，但当我点击它时它不会关闭

    我的解决方案

我尝试添加一个媒体查询来为 752 像素以下的设备显示列表项“inline-block”，但由于某种原因我无法让它工作。

对于 Logo ，我尝试使用“visible-lg”类，使其仅在大屏幕上可见(并计划添加一个仅在小屏幕上可见)，但它使 Logo 出现在右侧而不是在中心，我似乎无法用 CSS 更改它，因为它只是停留在右边。

我真的很喜欢居中导航栏内的 Logo ，并且几天来一直在尝试寻找解决方案，但我编写的代码似乎没有任何区别，尤其是菜单项在切换菜单上的显示方式。我可以让它与这个导航栏一起使用吗？我担心我需要重新开始，而忘记将 Logo 放在其中。非常感谢任何帮助或建议

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;


}

最佳答案

try this navbar code for your website or use these class for responsive 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>

关于html - 垂直显示折叠的菜单项，导航栏居中， Logo 居中( Bootstrap )，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41473129/

32 4 0
文章推荐： javascript - 如何将div的信息放入弹出框中？
文章推荐： javascript - 单击 HTML 按钮更改 CSS？
文章推荐： javascript - 删除控制框和图像之间的填充。 Fabric.js
文章推荐： javascript - JQuery 函数点击 html 页面 1 上的按钮，影响 html 页面 2 的列