-1
何らかの理由で、画面サイズをタブレットまたはモバイルの幅に縮小すると、折りたたみ可能なNavbarボタンが意図したとおりに機能しません。画面サイズが縮小されたときに折りたたみ可能なNavbarボタンがメニューを表示しない
また、フッタのソーシャルアイコンにロゴが正しく表示されません。アイコンは表示されますが、ロゴは表示されません。
.jumbotron {
border-radius: 0;
background-color: #F44336;
color: #FFF;
height: 100px;
}
body{
padding:0px;
z-index:0;
}
.navbar-default {
\t
}<!DOCTYPE html>
<html>
<head>
\t <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 -->
\t <title></title>
\t <!-- 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>
\t <div class="container">
\t \t <div class="jumbotron" style="top:15em; width=100%; margin-bottom:0;">
\t \t \t <div class="row">
\t \t \t \t <div class="col-md-12">
\t \t \t \t \t <nav class="navbar-default" style="margin-bottom:0;"">
\t \t \t \t \t \t <div class="container-fluid">
\t \t \t \t \t \t \t <div class="navbar-header">
\t \t \t \t \t \t \t \t <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
\t \t \t <span class="sr-only">Toggle navigation</span>
\t \t \t <span class="icon-bar"></span>
\t \t \t <span class="icon-bar"></span>
\t \t \t <span class="icon-bar"></span>
\t \t \t </button>
\t \t \t <a class="navbar-brand" href="#">Ristorante Con Fusion</a>
\t \t \t <a class="navbar-brand" href="#">Ristorante Con Fusion</a>
\t \t \t <a class="navbar-brand" href="#">Ristorante Con Fusion</a>
\t \t \t <a class="navbar-brand" href="#">Ristorante Con Fusion</a>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </nav>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
\t <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>
\t \t 121, Clear Water Bay Road<br>
\t \t Clear Water Bay, Kowloon<br>
\t \t HONG KONG<br>
\t \t Tel.: +852 1234 5678<br>
\t \t Fax: +852 8765 4321<br>
\t \t Email: <a href="mailto:[email protected]">[email protected]</a>
\t \t </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>
\t <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
\t <!-- Latest compiled and minified JavaScript -->
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
それはcodeplyで同じ問題です。私はこれを修正するのに問題があります。 –
また、私はソーシャルアイコンを修正する方法を見つけることができません。 –
あなたはnavbarにid = "navbar"を与える必要があります。コードをクリーンアップし、まだ問題がある場合は、ソーシャルアイコンに関する別の質問を投稿してください。 – ZimSystem