Question

出于某种原因，当我将屏幕尺寸缩小到平板电脑或移动宽度时，可折叠导航栏按钮无法按预期运行。

同样在页脚上，社交图标没有正确显示徽标。我看到的只是图标而不是它们上的徽标。

＆＃13;

.jumbotron {
    border-radius: 0;
    background-color: #F44336;
    color: #FFF;
    height: 100px;
}

body{
    padding:0px;
    z-index:0;
}

.navbar-default {
	
}

＆＃13;

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head 
         content must come *after* these tags -->
	<title></title>
	<!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://d396qusza40orc.cloudfront.net/phoenixassets/web-frameworks/bootstrap-social.css">
    <link rel="stylesheet" type="text/css" href="mystyle.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="container">
		<div class="jumbotron" style="top:15em; width=100%; margin-bottom:0;">
			<div class="row">
				<div class="col-md-12">
					<nav class="navbar-default" style="margin-bottom:0;"">
						<div class="container-fluid">
							<div class="navbar-header">
								<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        			<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="#">Ristorante Con Fusion</a>
                    			<a class="navbar-brand" href="#">Ristorante Con Fusion</a>
                    			<a class="navbar-brand" href="#">Ristorante Con Fusion</a>
                    			<a class="navbar-brand" href="#">Ristorante Con Fusion</a>
							</div>
						</div>
					</nav>
				</div>
			</div>
		</div>
	</div>

	<footer>
        <div class="container">
            <div class="row">             
                <div>
                    <h5>Links</h5>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div>
                    <h5>Our Address</h5>
                    <address>
		              121, Clear Water Bay Road<br>
		              Clear Water Bay, Kowloon<br>
		              HONG KONG<br>
		              Tel.: +852 1234 5678<br>
		              Fax: +852 8765 4321<br>
		              Email: <a href="mailto:confusion@food.net">confusion@food.net</a>
		           </address>
                </div>
                <div>
                    <div class="nav navbar-nav" style="padding: 40px 10px;">
                        <a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
                        <a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
                        <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
                        <a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
                        <a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
                        <a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
                    </div>
                </div>
                <div>
                    <p style="padding:10px;"></p>
                    <p align=center>© Copyright 2015 Ristorante Con Fusion</p>
                </div>
            </div>
        </div>
    </footer>

</body>


	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

＆＃13;

Answer 1

data-target是“#navbar”，但您在任何地方都没有id="navbar"。

http://www.codeply.com/go/N3QNRroUnM

还有很多无效的HTML ..

（即：<div class="jumbotron" style="top:15em; width=100%; margin-bottom:0;"）

当屏幕尺寸缩小时，可折叠的导航栏按钮不显示菜单

1 个答案: