为什么子菜单不能使用此Bootstrap模板?

时间:2017-07-27 00:26:33

标签: twitter-bootstrap

我正在学习Bootstrap,但我可以让子菜单出现

单击子菜单时,它没有响应。那里应该有子菜单下拉。

这是我试图复制的原件bootsnipp.com/fullscreen/r1Pjd

所有来源都是CDN。

我该如何解决这个问题?

 <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <!-- Latest compiled and minified CSS-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" href="https://bootsnipp.com/dist/bootsnipp.min.css" crossorigin="anonymouse">

    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Latest compiled and minified JavaScript -->


    <style>

    .nav-side-menu {
      overflow: auto;
      font-family: verdana;
      font-size: 12px;
      font-weight: 200;
      background-color: #2e353d;
      position: fixed;
      top: 0px;
      width: 300px;
      height: 100%;
      color: #e1ffff;
    }
    .nav-side-menu .brand {
      background-color: #23282e;
      line-height: 50px;
      display: block;
      text-align: center;
      font-size: 14px;
    }
    .nav-side-menu .toggle-btn {
      display: none;
    }
    .nav-side-menu ul,
    .nav-side-menu li {
      list-style: none;
      padding: 0px;
      margin: 0px;
      line-height: 35px;
      cursor: pointer;
      /*    
        .collapsed{
           .arrow:before{
                     font-family: FontAwesome;
                     content: "\f053";
                     display: inline-block;
                     padding-left:10px;
                     padding-right: 10px;
                     vertical-align: middle;
                     float:right;
                }
         }
    */
    }
    .nav-side-menu ul :not(collapsed) .arrow:before,
    .nav-side-menu li :not(collapsed) .arrow:before {
      font-family: FontAwesome;
      content: "\f078";
      display: inline-block;
      padding-left: 10px;
      padding-right: 10px;
      vertical-align: middle;
      float: right;
    }
    .nav-side-menu ul .active,
    .nav-side-menu li .active {
      border-left: 3px solid #d19b3d;
      background-color: #4f5b69;
    }
    .nav-side-menu ul .sub-menu li.active,
    .nav-side-menu li .sub-menu li.active {
      color: #d19b3d;
    }
    .nav-side-menu ul .sub-menu li.active a,
    .nav-side-menu li .sub-menu li.active a {
      color: #d19b3d;
    }
    .nav-side-menu ul .sub-menu li,
    .nav-side-menu li .sub-menu li {
      background-color: #181c20;
      border: none;
      line-height: 28px;
      border-bottom: 1px solid #23282e;
      margin-left: 0px;
    }
    .nav-side-menu ul .sub-menu li:hover,
    .nav-side-menu li .sub-menu li:hover {
      background-color: #020203;
    }
    .nav-side-menu ul .sub-menu li:before,
    .nav-side-menu li .sub-menu li:before {
      font-family: FontAwesome;
      content: "\f105";
      display: inline-block;
      padding-left: 10px;
      padding-right: 10px;
      vertical-align: middle;
    }
    .nav-side-menu li {
      padding-left: 0px;
      border-left: 3px solid #2e353d;
      border-bottom: 1px solid #23282e;
    }
    .nav-side-menu li a {
      text-decoration: none;
      color: #e1ffff;
    }
    .nav-side-menu li a i {
      padding-left: 10px;
      width: 20px;
      padding-right: 20px;
    }
    .nav-side-menu li:hover {
      border-left: 3px solid #d19b3d;
      background-color: #4f5b69;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: all 1s ease;
    }
    @media (max-width: 767px) {
      .nav-side-menu {
        position: relative;
        width: 100%;
        margin-bottom: 10px;
      }
      .nav-side-menu .toggle-btn {
        display: block;
        cursor: pointer;
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 10 !important;
        padding: 3px;
        background-color: #ffffff;
        color: #000;
        width: 40px;
        text-align: center;
      }
      .brand {
        text-align: left !important;
        font-size: 22px;
        padding-left: 20px;
        line-height: 50px !important;
      }
    }
    @media (min-width: 767px) {
      .nav-side-menu .menu-list .menu-content {
        display: block;
      }
    }
    body {
      margin: 0px;
      padding: 0px;
    }

    </style>

    </head>

    <body>

    <div class="nav-side-menu">
        <div class="brand">Brand Logo</div>
        <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>

            <div class="menu-list">

                <ul id="menu-content" class="menu-content collapse out">
                    <li>
                      <a href="#">
                      <i class="fa fa-dashboard fa-lg"></i> Dashboard
                      </a>
                    </li>

                    <li  data-toggle="collapse" data-target="#products" class="collapsed active">
                      <a href="#"><i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span></a>
                    </li>
                    <ul class="sub-menu collapse" id="products">
                        <li class="active"><a href="#">CSS3 Animation</a></li>
                        <li><a href="#">General</a></li>
                        <li><a href="#">Buttons</a></li>
                        <li><a href="#">Tabs & Accordions</a></li>
                        <li><a href="#">Typography</a></li>
                        <li><a href="#">FontAwesome</a></li>
                        <li><a href="#">Slider</a></li>
                        <li><a href="#">Panels</a></li>
                        <li><a href="#">Widgets</a></li>
                        <li><a href="#">Bootstrap Model</a></li>
                    </ul>


                    <li data-toggle="collapse" data-target="#service" class="collapsed">
                      <a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a>
                    </li>  
                    <ul class="sub-menu collapse" id="service">
                      <li>New Service 1</li>
                      <li>New Service 2</li>
                      <li>New Service 3</li>
                    </ul>


                    <li data-toggle="collapse" data-target="#new" class="collapsed">
                      <a href="#"><i class="fa fa-car fa-lg"></i> New <span class="arrow"></span></a>
                    </li>
                    <ul class="sub-menu collapse" id="new">
                      <li>New New 1</li>
                      <li>New New 2</li>
                      <li>New New 3</li>
                    </ul>


                     <li>
                      <a href="#">
                      <i class="fa fa-user fa-lg"></i> Profile
                      </a>
                      </li>

                     <li>
                      <a href="#">
                      <i class="fa fa-users fa-lg"></i> Users
                      </a>
                    </li>
                </ul>
         </div>
    </div>


    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"
                  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
                  crossorigin="anonymous">


    </script>



    </body>
    </html>

1 个答案:

答案 0 :(得分:0)

由于Bootstrap需要jQuery,因此必须先包含它。其余的源代码似乎没问题。

<script src="https://code.jquery.com/jquery-3.2.1.min.js" ... ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ... ></script>

修改 您的内容区域必须按侧边栏的宽度向右移动。由于您的侧边栏是固定的,因此无需浮动。

.content {
   margin-left: 300px;
}

...

<div class="content">
   <h1>Content area</h1>
</div>