Question

我是bootstrap的新手，我正在尝试理解导航栏，我尝试将背景图像放到导航栏中，为其设置ID：

HTML：

<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">

    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Tutorial</a>
        </div>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#" target="_blank">Home</a></li>
                <li><a href="#" target="_blank">About</a></li>
                <li><a href="#" target="_blank">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

CSS：

#myNavbar{
        background-image:url(../images/image1.png); 
        background-size:cover;  
    }

我想知道的是，是否有办法根据image1.png的大小调整导航栏的高度...

图像的初始尺寸为1280x150像素，最终为400x50，我希望条形图具有相同的尺寸，因为它现在正在1280x50开始，最终以400x50结束，从而裁剪图像

Answer 1

我无法理解..您是否要求导航栏高400px或1280px高？

完全不用提及#myNavbar ID，试试这个：

.navbar-default
{
    background-image:url(../images/image1.png); 
    background-size:cover;  
    height:150px;
}

@media only screen and (max-width: 400px){

  .navbar-default
     {
       background-image:url(../images/image1.png); 
       background-size:cover;  
       height:50px;
     }
}

如何调整bootstrap导航栏高度

1 个答案: