使用引导程序创建菜单不起作用[关闭]答案

【问题标题】：creating menu using bootstrap not working [closed]使用引导程序创建菜单不起作用[关闭]
【发布时间】：2017-02-14 02:52:11
【问题描述】：

我尝试使用引导程序创建响应式菜单。但我不知道如何实现这一点。

我的想法是，左侧应该有一个徽标，右侧菜单应该在那里。

以下是我的菜单创意。看看吧，

是否可以使用引导程序制作如上图所示的菜单。

我试过下面的代码，

<div class="menu">
        <div class="container">
            <div class="row">
                <div class="col-sm-3 vcenter">
                    <p><img src="<?php echo base_url("assets/images/logo.png"); ?>" alt="Logo" /></p>
                </div>
                <div class="col-sm-9 vcenter">
                    <nav role="navigation" class="navbar navbar-default">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <!-- Collection of nav links and other content for toggling -->
                        <div id="navbarCollapse" class="collapse navbar-collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li class="active"><a href="#">Home</a></li>
                                <li><a href="#">Profile</a></li>
                                <li><a href="#">Messages</a></li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>

【问题讨论】：

看这里：getbootstrap.com/components/#navbar-default
您确实需要先尝试使用文档示例，然后再询问是否遇到特定问题。
@ZimSystem ：再次检查问题。我已经编辑了。
什么不起作用？ bootply.com/Ltm7bd7CZN Javascript 错误？ CSS问题？还有什么？我认为您应该使用文档示例从头开始。

标签： jquery html css twitter-bootstrap

【解决方案1】：

好吧，我不知道你是否发布了完整的代码，但你应该从头开始，包括 bootstrap CSS 和 boostrap JS（和 jquery）。

恭喜，Bootstrap 真的很酷，对于像我这样的老开发者来说，简直就是天堂。

【讨论】：

【解决方案2】：

这样就可以实现了---

全屏显示

<html>
  <head>
  <meta charset="UTF-8">
        <title>Secure Login</title>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </head>
  <body>
      <nav class="navbar navbar-default">
  <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="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      
        
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Company</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Technology</a></li>
        <li><a href="#">Products</a></li> 
        <li><a href="#">Insights</a></li> 
      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</body>
</html>

【讨论】：

我可以知道投反对票的原因吗？