Question

我已经在Bootstrap 3.6中完成了编码。当我为小型设备打开导航栏时，所有功能都很完美，但我在导航栏上给出了网站的标识和名称，小屏幕网站名称在外面导航到导航栏。请在Code

下面

 <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <title>Webmap Cities</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
      <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
       body { overflow: hidden; }
    .navbar-offset { margin-top: 50px; }
          #map { position: absolute; top: 50px; bottom: 0px; left: 0px; right: 0px; }
          #map .ol-zoom { font-size: 1.2em; }

          .zoom-top-opened-sidebar { margin-top: 5px; }
          .zoom-top-collapsed { margin-top: 45px; }
    .mini-submenu{
            display:none;  
            background-color: rgba(255, 255, 255, 0.46);
            border: 1px solid rgba(0, 0, 0, 0.9);
            border-radius: 4px;
            padding: 9px;  
            /*position: relative;*/
            width: 42px;
            text-align: center;
          }

          .mini-submenu-left {
            position: absolute;
            top: 60px;
            left: .5em;
            z-index: 40;
          }
          .mini-submenu-right {
            position: absolute;
            top: 60px;
            right: .5em;
            z-index: 40;
          }

          #map { z-index: 35; }

          .sidebar { z-index: 45; }

          .main-row { position: relative; top: 0; }

          .mini-submenu:hover{
            cursor: pointer;
          }

          .slide-submenu{
            background: rgba(0, 0, 0, 0.45);
            display: inline-block;
            padding: 0 8px;
            border-radius: 4px;
            cursor: pointer;
          }

       @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
            z-index:99;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .navbar-header {
            float: none;
        }
        .navbar-toggle {
            display: block;
        }
        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }
        .navbar-collapse.collapse {
            display: none!important;
        }
        .navbar-nav {
            float: none!important;
            /*margin: 7.5px -15px;*/
            margin: 7.5px 50px 7.5px -15px
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .navbar-text {
            float: none;
            margin: 15px 0;
        }
        /* since 3.1.0 */
        .navbar-collapse.collapse.in { 
            display: block!important;
        }
        .collapsing {
            overflow: hidden!important;
        }
    }
    .navbar-brand
    {
    font-size:100% !important;
    }
     </style>
     <body onload="mumbai();">
     <div class="container">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <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="#"><span><img style="height:30px;width:30px"src="http://cdn.9appsdownloading.com/group1/M01/35/1C/poYBAFcpqU-AFa5CAAAMm35WLrc217.png" text=""></span><h4 style="display:inline;color:red">Urban Growth in Mumbai Metropolitan Area 1975-2014</h4></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right">
           <li><a href="#">Mumbai</a></li>
                       <li class="divider"></li>
                      <li><a href="Delhi.html">Delhi</a></li>
                      <li class="divider"></li>
                      <li><a href="Bengaluru.html">Bengaluru</a></li>
                    </ul>
        </div>
      </div>
    </nav>
   </body>
    </html>

同时检查此链接以了解输出： http://www.responsinator.com/?url=http%3A%2F%2F176.9.117.220%3A8282%2Ftrail_menu_8_8_2017%2520-%2520Copy.html 感谢。

Answer 1

只需给黑框标题自动高度。给它宽度100vw。内容应写在框中，navicon不必放在框中。然后将其应用到您的盒子中:(显示：flex; justify-content：center; align-items：center;）。使用（位置：绝对;顶部：5px;右：5px;）来定位导航图标。最后只需在文本中添加一点填充，就可以了！

请问我是否还有其他问题。

我希望这会对你有所帮助

如何增加手机的导航栏尺寸？

1 个答案: