0
我最近一直在爲我的業務開發一個網頁，並且一直在提問以幫助自我發展，名爲Empreus。當調整大小時，Bootstrap徽標不會縮小
我使用bootstrap來幫助我設計頁面。 但是，我現在遇到了問題。
我到目前爲止的代碼顯示在代碼片段中。
@font-face {
font-family: 'montserratlight';
src: url('montserrat-light-webfont.eot');
src: url('montserrat-light-webfont.eot?#iefix') format('embedded-opentype'),
url('montserrat-light-webfont.woff2') format('woff2'),
url('montserrat-light-webfont.woff') format('woff'),
url('montserrat-light-webfont.ttf') format('truetype'),
url('montserrat-light-webfont.svg#montserratlight') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'montserratsemi_bold';
src: url('montserrat-semibold-webfont.eot');
src: url('montserrat-semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('montserrat-semibold-webfont.woff2') format('woff2'),
url('montserrat-semibold-webfont.woff') format('woff'),
url('montserrat-semibold-webfont.ttf') format('truetype'),
url('montserrat-semibold-webfont.svg#montserratsemi_bold') format('svg');
font-weight: normal;
font-style: normal;
}
#header {
\t padding:10px 0 0 0 ;
}
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
\t
\t .navbar-brand {
\t \t display:none;
\t }
}
.navbar {
\t margin-bottom:0px;
\t font-family:"montserratlight";
\t text-transform: uppercase;
\t border-top:2px solid #000;
\t border-bottom: 2px solid #000;
\t border-radius:0px;
}
img.logoEmpreus {
\t margin-left: auto;
\t margin-right: auto;
\t display:block;
\t margin-bottom:10px;
}
img.logoEmpreus:hover {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
#page {
\t margin: 0px auto;
}
li {
\t display:inline;
\t margin:0 -1px;
}
li a {
color: black;
font-size:16px;
text-decoration: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
li a:hover {
color: blue;
font-size:18px;
text-decoration: none
}
li.active a {
font-weight: bold;
color: #333;
text-decoration: none
}
ul {
\t margin:0 auto;
\t font-family:"montserratlight";
\t text-transform: uppercase;
}
.active {
\t font-family:'montserratsemi_bold';
}
.imageInside {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
\t margin-top:0px;
\t margin-bottom:0px;
}
h2 span {
color: white;
font: bold 0.8em 'montserratsemi_bold', Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#base ul {
\t margin:0 auto;
\t border-top:2px solid #000;
\t border-bottom: 2px solid #000;
\t padding:10px;
\t text-align: center;
\t font-family:"montserratlight";
\t text-transform: uppercase;
}<!DOCTYPE html>
\t <head>
\t \t <title>Problems | Stack Overflow</title>
\t \t <!-- Tab Title -->
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
\t \t
\t \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
\t \t
\t \t <meta name="viewport" content="width=device-width, initial-scale=1.0">
\t \t
\t \t <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
\t \t
\t </head>
\t <body>
\t \t
\t \t <div id = "header">
\t \t \t <!-- Empreus logo Image. Animated. Width 300px. -->
\t \t \t <img class = "logoEmpreus animated" src = "http://bit.ly/1P2ZlbH" alt="Empreus" width="300" />
\t \t </div>
\t \t
\t \t <div class="container">
\t \t \t
\t \t \t <nav class="navbar navbar-default" role="navigation">
\t \t \t <!-- Brand and toggle get grouped for better mobile display -->
\t \t \t <div class="navbar-header">
\t \t \t \t \t <a class="navbar-brand" href="#">Stack Overflow</a>
\t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
\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 </div>
\t \t \t <!-- Collect the nav links, forms, and other content for toggling -->
\t \t \t <div class="collapse navbar-collapse navbar-ex1-collapse">
\t \t \t <ul class="nav navbar-nav">
\t \t \t <li><a href="#">Option 1</a></li>
\t \t \t <li><a href="#">Option 2</a></li>
\t \t \t <li><a href="#">Option 3</a></li>
\t \t \t \t \t \t <li><a href="#">Option 4</a></li>
\t \t \t \t \t \t <li><a href="#" class="active"><b>The Problem</b></a></li>
\t \t \t </ul>
\t \t \t </div><!-- /.navbar-collapse -->
\t \t \t </nav>
\t \t \t <div class = "row">
\t \t \t <!-- Declaration of First Row -->
\t \t \t \t <div class="imageHolder col-md-12" style="margin-top:10px;">
\t \t \t \t <!-- Image Container as DIV -->
\t \t \t \t \t <div class = "imageInside hvr-underline-from-center" >
\t \t \t \t \t \t <h2><span>Logo Issue.</span></h2>
\t \t \t \t \t \t <img id = "imageHomeJPG" src="http://bit.ly/1P2Ylo3" style="width:100%" />
\t \t \t \t \t </div>
\t \t \t \t \t <!-- Image Link -->
\t \t \t </div> \t
\t \t \t </div> \t
\t \t \t
\t \t \t
\t \t \t <div class="row">
\t \t \t
\t \t \t <div id = "base" class="col-md-12" style="margin-bottom:10px">
\t \t \t \t \t <p>
\t \t \t \t \t \t <ul class="col-md-12">
\t \t \t \t \t \t \t <!-- MAIN NENU BAR -->
\t \t \t \t \t \t \t <li><a href="#">Copyright Whatever</a></li>
\t \t \t \t \t \t </ul>
\t \t \t \t \t \t <!-- Unordered lists.-->
\t \t \t \t \t </p>
\t \t \t </div>
\t \t \t <!-- Navigation HTML Markup -->
\t \t \t
\t \t \t </div>
\t \t \t
\t \t </div>
\t </body>
\t </html>現在，這裏的問題。 在iPhone 6設備上查看的網頁顯示爲這樣。 
然而，在iPhone上4/iPhone 5，標誌移出容器的（見下文） 
我想要的標誌是容器寬度內，就像正常的iPhone 6 & 6加例子。我在考慮是否可以添加一些代碼來使徽標更加靈活，但我至今嘗試使用min-width，這些代碼沒有付出任何努力。
任何人都可以幫忙嗎？ 我已將代碼作爲片段插入。請全屏查看。 我使用chrome inspect元素&調整大小以模擬屏幕功能來獲取這些屏幕截圖。
謝謝。
yaaay它的工作！謝謝！！ –