Question

我最近开始研究我下载的模板，并且我总是喜欢在完成所需的所有基本更改后检查事物的响应方面是否正常。

幸运的是，我只有一个问题，那就是当我调整浏览器大小时，导航栏中的“品牌文字”会爆发而不是调整大小。

如果有人能就如何解决这个问题提出建议，我会很高兴。

请在下面找到相关代码

<section id="header" class="appear"></section>
    <div class="navbar navbar-fixed-top" role="navigation" data-0="line-height:100px; height:100px; background-color:rgba(0,0,0,0.3);" data-300="line-height:60px; height:60px; background-color:rgba(0,0,0,1);">
         <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="fa fa-bars color-white"></span>
                </button>
                <h1><a class="navbar-brand" href="index.html" data-0="line-height:90px;" data-300="line-height:50px;">          DirectDesignKent Computer Repairs
                </a></h1>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav" data-0="margin-top:20px;" data-300="margin-top:5px;">
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="#section-about">About</a></li>
                    <li><a href="#section-contact">Contact</a></li>
                </ul>
            </div><!--/.navbar-collapse -->
        </div>
    </div>

CSS

.navbar {
    line-height: 100px;
    height: 100px;
    background-color: rgba(0,0,0,0.3);
    display: block;
    vertical-align: middle;
    text-align: center;
    margin-bottom: 0;
    padding-bottom:0;
}

.navbar .navbar-collapse {
    margin-bottom: 0;
    padding-bottom:0;
}

.nav li {
    height: 100%;
    line-height: 100%;
    margin-bottom: 0;
    padding-bottom:0;
}

.nav>li>a {
    display: table-cell;
    height: 100%;
    line-height: 100%;
    vertical-align: middle;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.nav>li>a:hover {
    color: #fff;
    background: none;
}

.navbar-nav {
    float: right;
    margin-bottom: 0;
    padding-bottom:0;   
}

.navbar .navbar-nav > .active > a {
    color: #fff;
}

.navbar .navbar-nav > .active > a {
    padding-bottom: 22px;
}

h1 a.navbar-brand {
    font-size: 24px;
    color: #fff;
    font-weight: 900;
    text-shadow: none;
}

.navbar-brand {
    padding: 0;
    display: table-cell;
    vertical-align: middle;
    line-height: 90px;
}

.navbar-brand img {
    vertical-align: middle;
}

.navbar-toggle {
    padding: 0;
    margin: 0;
    width: 80px;
}

.navbar-collapse.in {
    margin-top: -5px !important;
}

感谢您的提前帮助

Bootstrap NavBar品牌文字调整大小后突破

0 个答案: