Question

在横向视图中查看平板电脑上的Bootstrap 3网站时，它决定将我们的按钮换行，看起来很糟糕......

navbar button width layout problem http://www.lifeboatparkfest.co.uk/images/navbarlayoutissue.jpg ！[导航栏按钮宽度布局问题] [1]

我可以覆盖修复它的宽度，但这意味着为每个按钮设置相同的宽度，我希望宽度为自动。我已经尝试过宽度：在导航栏的CSS中使用auto但是没有解决它。

为什么会发生这种情况？先感谢您。 NJ

<div class="navbar-wrapper">
    <div class="container">
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <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="index.php"><img src="images/logo.png" alt="Stranraer Inshore Lifeboat Park Fest" width="198" height="32" title="Stranraer Inshore Lifeboat Park Fest"></a>
                </div><!-- end navbar-header -->

                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="index.php">Home</a></li>
                        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">What's On? <strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li><a href="park-fest-friday-lineup.php">&nbsp;&nbsp;&nbsp;Friday 22nd August 2014 - Young Guns Night&nbsp;&nbsp;&nbsp;</a></li>
                                <li><a href="park-fest-saturday-lineup.php">&nbsp;&nbsp;&nbsp;Saturday 23rd August 2014 - Park Fest&nbsp;&nbsp;&nbsp;</a></li>
                            </ul><!-- end dropdown-menu -->
                        </li><!-- end dropdown -->
                        <li><a href="parkfest-sponsors.php">Our Sponsors</a></li> 
                        <li><a href="parkfest-tickets.php">Buy Tickets</a></li> 
                    </ul><!-- end nav navbar-nav -->                 
                </div><!-- end nav-collapse -->
            </div><!-- end container -->
        </div><!-- end navbar -->
    </div><!-- end container -->
</div><!-- end navbar-wrapper -->

... CSS

/* navbar */
.navbar-default {
    background-color: #0059B2;
    border:none;
    opacity: 0.95;
    font-size: 16px;
}

/* title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #ffffff;
}

/* link */
.navbar-default .navbar-nav > li > a {
    color: #ffffff;
    height: 50px;
    padding-top: 15px;
    background-color: #0059B2;
    border: none;
    width: auto;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #000066;
    background-color: #ffffff;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: #0059B2;
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #000066;
    background-color: #ffffff;
}

.navbar-default .navbar-nav .open .dropdown-menu  {
    border: none;
    padding: 0;
}

.navbar-default .navbar-nav .open .dropdown-menu > li {
    color: #000066;
    background-color: #ffffff;
    font-size: 16px;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #000066;
    background-color: #ffffff;
}

.dropdown-menu {
    border: none;
    padding: 0; 
}
.dropdown-menu > li > a {
    clear: both;
    color: #333333;
    display: block;
    line-height: 1.42857;
    padding: 3px 10px;
    white-space: nowrap;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    padding: 10px;
    margin:0;
    color: #ffffff;
    background-color: #0059B2;
}
/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #0059B2;
    border-bottom-color: #0059B2;
}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #0059B2;
    border-bottom-color: #0059B2;
}
/* mobile version */
.navbar-default .navbar-toggle {
    border: none;
    padding-top:15px;
}
.navbar-default .dropdown-toggle {
    border: none;
    margin:0;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #0059B2;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}

Bootstrap 3导航栏菜单按钮宽度布局错误

0 个答案: