Question

我是CSS和Bootstrap的新手。

我有大品牌形象（logotipo-white），我希望将其大小调整为原始大小的30％。但是，当我应用以下代码时，图像看起来很小但仍然占据原始空间，将导航链接推送到另一条线。

我该如何解决这个问题？

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：

body{
background-image:url('../images/bg-green.jpg') ;
}
.brand img{
max-width: 30%;
}

Answer 1

html中的

不要为你的品牌使用ul，因为这不是必需的，而是使用a-tag代替：

<a class="brand" href="#"><img src="images/logotipo-white.png" /></a>

并解决您的问题，在css中执行以下操作：CSS：

.navbar .brand { 
    max-height: 40px;
    max-width: 30%; 
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0; 
}

Answer 2

如果它是使用bootstrap构建的，那么所有内容都放在Spans中。尝试制作跨度时它更小。

Answer 3

您不应直接在<img>内使用<ul>。

标记可能是这样的：

        <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>

或者这个：

        <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>

或者这个：

        <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>

Answer 4

在Joomla！ 3模板css添加最大宽度：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;
    }

如何调整品牌形象？

4 个答案: