在Window Resize上将Navbar Brand保持在一个位置

时间:2015-05-23 09:04:22

标签: html css image twitter-bootstrap position

即使在调整窗口大小后,我也试图让导航栏保持在同一位置。它继续调整大小,因此导航栏和导航品牌没有按照我想要的方式调整:

HTML:

<div class="navbar navbar-inverse navbar-static-top">

            <div class="container">
                <div class="logo">
                    <center>
                        <a class="navbar-brand" href="#"><img src="Final.png"/></a>
                    </center>
                </div>
                <div>
                    <div class="navbar-header">
                        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                </div>        

                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.html">Home</a></li>
                        <li><a href="Services.html">Services</a></li>
                        <li><a href="Prices.html">Our Prices</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="Contact.html">Contact Us</a></li>
                    </ul>
                </div>
            </div>
        </div>

CSS:

.nav, .navbar-nav {
    display: inline-block;
    margin:0;
    float:none;
    margin-top: -15px;
}

.navbar-nav li {
    padding-left: 20px;
    padding-right: 20px;
}

.navbar-nav li:hover {
    background-color: #3c3c3c;
}

.navbar-nav {
    color:red;
}


.navbar-brand {
  float: none;
}

.navbar-center {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
    height:100%;
}

.navbar .navbar-collapse {
    text-align: center;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

.logo img {
    height:80px;
    margin-top: -15px;

}

.logo {
    width: 40%;
    margin: 0 auto;
}

0 个答案:

没有答案