【问题标题】:Bootsrap dropdown hover menu is not responsiveBootstrap 下拉悬停菜单没有响应
【发布时间】:2017-11-25 14:18:01
【问题描述】:

Website before window is minimised. Website after window is minimised. 我有一个按预期工作的引导悬停下拉菜单,除非浏览器窗口最小化,否则菜单根本不显示。我用自己的 css 覆盖了一些样式。

任何关于我哪里出错的帮助或指示将不胜感激。

HTML:

<div class="bs-example">
    <nav id="myNavbar" class="navbar navbar-inverse" role="navigation">
        <div class="container" align="center">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Text</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle disabled" data-hover="dropdown" data-toggle="dropdown" href="#">Text<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Text</a></li>
                            <li><a href="#">Text</a></li>
                            <li><a href="#">Text</a></li>
                        </ul>
                    </li>
					<li class="dropdown">
                        <a class="dropdown-toggle disabled" data-hover="dropdown" data-toggle="dropdown" href="#">Text<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Text</a></li>
                        </ul>
                    </li>
					<li><a href="#">Text</a></li>
					<li><a href="#">Text</a></li>
					<li><a href="#">Text</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

CSS: @import url('https://fonts.googleapis.com/css?family=Open+Sans'); .bs-示例{

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
	.bs-example{
		background-color: black !important;
		width: 100%;
		position: relative;
		position: fixed;
    }
	.navbar{
		background-color: black !important;
	}
	.nav > li > a{
		font-family: Open Sans;
		font-size: 18px;
		color: white !important;
		background-color: black;
		text-align: center;
		padding: 20px 40px;
	}
	.dropdown:hover .dropdown-menu{
		width: 100%;
		display: block;
	}
	.dropdown-menu{
		font-family: Open Sans;
		font-size: 18px;
		color: white !important;
		text-align: center;
		padding: 0px;
	}
	.dropdown a {
		color: white !important;
		background-color: black !important;
	}

【问题讨论】:

  • 如果你能提供你的网页在最小化窗口前后的截图对我们会有帮助
  • @HamedAdil 我已经添加了截图。

标签: html css navbar


【解决方案1】:

我不知道你有没有导入bootstrap.css和bootstrap.js,所以我建议你先尝试导入这两个,通常它应该是固定的

【讨论】:

  • 我的文件顶部有所有这些:maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
【解决方案2】:

它是折叠的,你需要一个toggler来在不同的状态(显示和隐藏)之间触发。在下面我给出了一个简短的例子我的意思。切换器是“汉堡包”图标(右侧的三条实线)。它只出现在较小的设备上,即窗口大小,所以如果你缩小你的窗口,你会看到切换器。您可以在此处找到更多信息:

  1. Bootstrap 3.3.7
  2. Bootstrap >=4.0

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Navbar Toggler</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
        <a class="navbar-brand" href="#">Your Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Page 1-1</a></li>
              <li><a href="#">Page 1-2</a></li>
              <li><a href="#">Page 1-3</a></li>
            </ul>
          </li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
        </ul>
      </div>
    </div>
  </nav>
</body>
</html>

最好的问候, 斯文

【讨论】:

    【解决方案3】:

    我无法获得响应式下拉悬停菜单(我在某处读到 Bootstrap 在尝试合并悬停时无法使菜单响应)。 相反,我使用了一个菜单,用户必须在其中单击父选项卡。

    .nav {
    	padding-left: 3cm !important;
    }
    
    .navbar {
        font-family: Open Sans !important;
    	font-size: 18px !important;
    	padding: 20px 42px !important;
    	color: #FF0000 !important;
    	background-color: black !important;
    	width: 100% !important;
    	position: fixed !important;
    	top: 0 !important;
    	z-index: 50 !important;
    	padding-bottom: 11px !important;
    }
    
    .navbar-inverse .navbar-brand{
    	color: white !important;
    	font-size: 22px !important;
    }
    
    .navbar-inverse .navbar-nav > li > a {
    	color: white !important;
    }
    
    .dropdown-menu > li > a {
    	font-family: Open Sans !important;
    	font-size: 18px !important;
        display: block;
        padding: 20px 42px !important;
        clear: both;
        font-weight: 400;
        line-height: 1.42857143;
        color: white !important;
        white-space: nowrap;
    }
    
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        float: left;
        min-width: 160px;
        padding: 5px 0;
        margin: 2px 0 0;
            margin-top: 2px;
        font-size: 14px;
        text-align: left;
        list-style: none;
        background-color: black !important;
    }
    .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
        color: white !important;
    	font-size: 18px !important;
        text-decoration: none;
        background-color: black !important;
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
          <a class="navbar-brand" href="#">Baby Daddy</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="home.php">Home</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Pregnancy and Birth<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="supportpartner.html">Support Your Partner</a></li>
                <li><a href="labour.html">Labour</a></li>
                <li><a href="complications.html">Complications</a></li>
              </ul>
            </li>
    		<li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Mental Health<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="postpartum.html">Postpartum Depression</a></li>
              </ul>
            </li>
            <li><a href="paternityleave.html">Paternity Leave</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="register.php"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li>
            <li><a href="login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
          </ul>
        </div>
      </div>
    </nav>

    【讨论】:

      猜你喜欢
      • 2020-06-07
      • 2019-10-30
      • 1970-01-01
      • 2013-04-21
      • 2017-10-24
      • 2019-12-31
      • 2020-07-15
      • 2018-12-27
      • 2014-09-01
      相关资源
      最近更新 更多