twitter-bootstrap 如何调整品牌形象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20685400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to resize Brand Image?
提问by Kelvin Santos
I'm very new to CSS and Bootstrap.
我对 CSS 和 Bootstrap 很陌生。
I have large brand image (logotipo-white), and I want to resize it to 30% of its original size. However, when I apply the following code the image appear small but still occupies the original space, pushing the nav links to another line.
我有大品牌形象（logotipo-white），我想将其调整为原始尺寸的 30%。但是，当我应用以下代码时，图像看起来很小但仍占据原始空间，将导航链接推到另一行。
How can I solve this?
我该如何解决这个问题？
HTML:
HTML：
<body>
<div class = "navbar navbar-fixed-top">
<div class = "navbar-inner">
<div class = "container">
<ul class = "brand"><img src="images/logotipo-white.png"></ul>
<ul class = "nav">
<li class = "active">
<a href = "#">Home</a>
</li>
<li><a href = "#">About</a></li>
<li><a href = "#">Portfolio</a></li>
<li><a href = "#">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
CSS:
CSS：
body{
background-image:url('../images/bg-green.jpg') ;
}
.brand img{
max-width: 30%;
}
采纳答案by Kristof Feys
in the html don't use an ul for your brand as this is not needed, use an a-tag instead:
在 html 中不要为您的品牌使用 ul，因为这不是必需的，请改用 a-tag：
<a class="brand" href="#"><img src="images/logotipo-white.png" /></a>
and to solve your issue, in css do the following: CSS:
并解决您的问题，在 css 中执行以下操作：
.navbar .brand {
max-height: 40px;
max-width: 30%;
overflow: visible;
padding-top: 0;
padding-bottom: 0;
}
回答by user7535343
In Joomla! 3 template css add max-width: 80% to .brand line 7137
在 Joomla! 3 模板 css 将 max-width: 80% 添加到 .brand line 7137
.brand {
color: #001a27;
max-width: 80%;
-webkit-transition: color .5s linear;
-moz-transition: color .5s linear;
-o-transition: color .5s linear;
transition: color .5s linear;
}
回答by user7535343
If it's built with bootstrap, then everything is placed within Spans. Trying making the span it is in smaller.
如果它是用 bootstrap 构建的，那么所有东西都放在 Spas 中。尝试使跨度更小。
回答by Kraz
You shouldn't use <img>directly inside <ul>.
你不应该<img>直接在<ul>.
The markup could be like this :
标记可能是这样的：
<ul class = "nav">
<li class="brand"><img src="images/logotipo-white.png"></li>
<li class = "active">
<a href = "#">Home</a>
</li>
<li><a href = "#">About</a></li>
<li><a href = "#">Portfolio</a></li>
<li><a href = "#">Contact</a></li>
</ul>
Or this :
或这个 ：
<ul class = "brand"><li><img src="images/logotipo-white.png"></li></ul>
<ul class = "nav">
<li class = "active">
<a href = "#">Home</a>
</li>
<li><a href = "#">About</a></li>
<li><a href = "#">Portfolio</a></li>
<li><a href = "#">Contact</a></li>
</ul>
or this :
或这个 ：
<div class = "brand"><img src="images/logotipo-white.png"></div><!--make me float/display:inline-block/other -->
<ul class = "nav">
<li class = "active">
<a href = "#">Home</a>
</li>
<li><a href = "#">About</a></li>
<li><a href = "#">Portfolio</a></li>
<li><a href = "#">Contact</a></li>
</ul>
![twitter-bootstrap ActionController::RoutingError (No route matching [GET]](/res/img/loading.gif)