个人中心
gpt4 book ai didi

html - Bootstrap Logo 在调整大小时不会缩小

转载 作者：太空宇宙 更新时间：2023-11-03 21:24:33 24 4
gpt4 key购买 nike


我最近一直在为我的企业开发一个网页，并一直在提问以帮助 self 发展，称为 Empreus。

我正在使用 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 {
	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;
    }
	
	.navbar-brand {
		display:none;
	}
}

.navbar {
	margin-bottom:0px;
	font-family:"montserratlight";
	text-transform: uppercase;
	border-top:2px solid #000;
	border-bottom: 2px solid #000;
	border-radius:0px;
}

img.logoEmpreus {
	margin-left: auto;
	margin-right: auto;
	display:block;
	margin-bottom:10px;
}

img.logoEmpreus:hover {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
}

#page {
	margin: 0px auto;
}

li {
	display:inline;
	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 {
	margin:0 auto;
	font-family:"montserratlight";
	text-transform: uppercase;
}

.active {
	font-family:'montserratsemi_bold';
}

.imageInside { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 {
	margin-top:0px;
	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 {
	margin:0 auto;
	border-top:2px solid #000;
	border-bottom: 2px solid #000;
	padding:10px;
	text-align: center;
	font-family:"montserratlight";
	text-transform: uppercase;
}
<!DOCTYPE html>
	<head>
		<title>Problems | Stack Overflow</title>
		<!-- Tab Title -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
		
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
		
	</head>
	<body>
		
		<div id = "header">
			<!-- Empreus logo Image. Animated. Width 300px. -->
			<img class = "logoEmpreus animated" src = "http://bit.ly/1P2ZlbH" alt="Empreus" width="300" />
		</div>
		
		<div class="container">
			
			<nav class="navbar navbar-default" role="navigation">
			        <!-- Brand and toggle get grouped for better mobile display -->
			        <div class="navbar-header">
					<a class="navbar-brand" href="#">Stack Overflow</a>
			          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
			            <span class="sr-only">Toggle navigation</span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			          </button>
			        </div>

			        <!-- Collect the nav links, forms, and other content for toggling -->
			        <div class="collapse navbar-collapse navbar-ex1-collapse">
			          <ul class="nav navbar-nav">
			            <li><a href="#">Option 1</a></li>
			          <li><a href="#">Option 2</a></li>
			            <li><a href="#">Option 3</a></li>
						<li><a href="#">Option 4</a></li>
						<li><a href="#" class="active"><b>The Problem</b></a></li>
			          </ul>
			        </div><!-- /.navbar-collapse -->
			      </nav>

			<div class = "row">
			<!-- Declaration of First Row -->
				<div class="imageHolder col-md-12" style="margin-top:10px;"> 
				<!-- Image Container as DIV -->
					<div class = "imageInside hvr-underline-from-center" >
						<h2><span>Logo Issue.</span></h2>
						<img id = "imageHomeJPG" src="http://bit.ly/1P2Ylo3" style="width:100%" />
					</div>
					<!-- Image Link -->
    			</div>	
			</div>	
			
			
			<div class="row">
			
			<div id = "base" class="col-md-12" style="margin-bottom:10px">
					<p>
						<ul class="col-md-12"> 
							<!-- MAIN NENU BAR -->
							<li><a href="#">Copyright Whatever</a></li>
						</ul>
						<!-- Unordered lists.-->
					</p>
			</div>
			<!-- Navigation HTML Markup -->
			
			</div>
			
		</div>
	</body>
	</html>

现在，问题来了。在 iPhone 6 设备上查看的网页显示为这样。 iPhone 6 & 6 plus

但是，在 iPhone 4/iPhone 5 上， Logo 会移出容器(见下文) iPhone 4 & 5

我希望 Logo 在容器宽度内，就像 iPhone 6 和 6 plus 示例中的正常情况一样。我在考虑是否可以添加一些代码来使 Logo 灵活，但到目前为止我尝试使用 min-width 但没有任何效果。

有人可以帮忙吗？我已将代码作为片段插入。请务必全屏查看。我使用 chrome inspect element & resize to simulated screens 函数来获取这些屏幕截图。

谢谢。

最佳答案

图像标签中硬编码的宽度可能让您感到困惑；它会覆盖样式表中的任何 CSS。您可以结合使用 width 作为百分比和 max-width 设置为图像的实际宽度:

<img class = "logoEmpreus animated" src = "http://bit.ly/1P2ZlbH" alt="Empreus" />

img.logoEmpreus {
    margin-left: auto;
    margin-right: auto;
    display:block;
    margin-bottom:10px;
    width: 80%;
    max-width: 300px;
}

下面的片段(为了简洁起见，我删除了一些不需要重复问题的 HTML/CSS):

#header {
  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;
  }
  .navbar-brand {
    display: none;
  }
}
.navbar {
  margin-bottom: 0px;
  font-family: "montserratlight";
  text-transform: uppercase;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  border-radius: 0px;
}
img.logoEmpreus {
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-bottom: 10px;
  width: 80%;
  max-width: 300px;
}
img.logoEmpreus:hover {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}
#page {
  margin: 0px auto;
}
li {
  display: inline;
  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 {
  margin: 0 auto;
  font-family: "montserratlight";
  text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="header">
  <!-- Empreus logo Image. Animated. Width 300px. -->
  <img class="logoEmpreus animated" src="http://bit.ly/1P2ZlbH" alt="Empreus" />
</div>

<div class="container">

  <nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Stack Overflow</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Option 1</a>
        </li>
        <li><a href="#">Option 2</a>
        </li>
        <li><a href="#">Option 3</a>
        </li>
        <li><a href="#">Option 4</a>
        </li>
        <li><a href="#" class="active"><b>The Problem</b></a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </nav>



</div>

关于html - Bootstrap Logo 在调整大小时不会缩小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34275647/

24 4 0
文章推荐： python - 使用 zxJDBC 调用过程时参数数量或类型错误
文章推荐： python - Raspberry Pi python显示内存中的图像
文章推荐： javascript - 如何从 Nuxt.js SPA 运行 Python 脚本？
文章推荐： c# - 是否可以确定列表操作是否线程安全？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com