Question

我正在使用bootstrap 3编写网站。我的代码有2个问题：

我想要一个以徽标为中心的菜单栏
调整浏览器窗口大小后汉堡包菜单不会扩展

我慢慢放弃。你看到这个问题的解决方案吗？这是我的代码 - index.html和CSS文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perm-Records</title>

    <!-- Bootstrap -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- Content height adjust -->
    <!-- <script src="content-height-adjust/heightAdjust.js"></script> -->

    <!--Font Awesome -->
    <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">

    <link href="bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/Custom.css">
    <link rel="stylesheet" href="css/flat-ui.css">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <link rel="stylesheet" href="css/sticky-footer.css">



    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="Custom">        
        <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <a class="navbar-brand" href="index.html">
                <img class="img-responsive logo" src="images/perm-logo.jpg" alt="Perm-Records">
            </a>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="#">EVENTS</a></li>
                    <li><a href="#">MUSIC</a></li>
                    <li><a href="#">GALLERY</a></li>
                    <li><a href="#">ABOUT</a></li>
                </ul>
            </div>
        </nav> <!-- End navigation menu bar -->      
    </div>    

    <div class="container-fluid"> <!--Page content -->
        <div class="row">
                <div class="col-md-3">
                </div>          
                    <div class="col-md-6">
                        <table border="0" align="center" cellpadding="0" cellspacing="0">                        
                            <tr><td align="center"><img src="images/Perm.png"></td></tr>                                
                        </table>
                            <p class="text-center"> Haubentaucher, Revaler Str 99, 10245 Berlin. </p>
                    </div>
                <div class="col-md-3">      
                </div>
        </div>
    </div>  <!-- End of page content -->

        <div class="footer">        
            <div class="navbar-text pull-left" id="footer-text">
                <p> &#169 2016 perm-records.com </p>
            </div>
            <div class="navbar-text pull-right" id="footer-social">
                <!-- Font Awesome social buttons -->
                <a href="https://soundcloud.com/permrecords" target="_blank" title="Soundcloud"><i class="fa fa-soundcloud fa-2x"></i></a> 
                <a href="https://www.facebook.com/permrecords/?fref=ts" target="_blank" title="Facebook"><i class="fa fa-facebook fa-2x"></i></a> 
                <a href="https://www.instagram.com/perm_records/" target="_blank" title="Instagram"><i class="fa fa-instagram fa-2x"></i></a>
            </div>
        </div>

</body>
</html>

.Custom .navbar {
    background-color: transparent;
    background: transparent;
    border-color: transparent;
    height: 180px;
}

.Custom .navbar .navbar-brand > a {
position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
    padding:0;
}

.Custom .text {
    text-align: center;
}

body, html{
    background: url('../images/Background2.png')  no-repeat center fixed;
    padding-top: 0px;
    height: 100vh;
    margin: 0;
}

Answer 1

对于否：1 =（我想要一个带徽标的菜单栏）

首先将<div class="Custom">...</div>放在<div class="container">...</div>中，使其适合由引导媒体查询控制的正文框。在<div class="container-fluid">代码后面添加<nav>，然后在</div>之前添加</nav>结束。第三，在样式中添加以下类，使其对齐居中并相应地调整边距等。

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}
.navbar .navbar-collapse {
  text-align: center;
}

.Custom .navbar-toggle {
  margin: 10px 0px 0 0;
}

@media (min-width: 768px) {
  .Custom .nav >li >a {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

对于否：2 =（调整浏览器窗口大小后汉堡菜单不会扩展）

您没有添加引导程序库所需的jquery库，需要在它之前添加。所以把下面的内容或者下载jquery.min.js（2.2.4版）文件并在<title>Perm-Records</title>

之后放置它的脚本标记

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

使用您的代码的示例代码：http://codepen.io/Nasir_T/pen/rMgRPM

希望这有帮助。

Bootstrap 3 - 中心菜单栏问题

1 个答案: