Question

我正在尝试学习如何使用bootstrap框架，但是我在操作bootstrap.css时遇到了麻烦。

我的导航栏有折叠功能。我知道当视口小于bootstrap的媒体查询变量时会触发它。好吧，我在Stack Overflow和其他网站上阅读了很多内容，但我还是无法修复它。当我将浏览器的大小调整为大约880px时，navibar会分成两行。在寻找这种不需要的行为的解决方案时，我发现有两种方法可以解决这个问题，一种方法是对引导程序的媒体查询变量进行处理并再次编译（我已经做过）或调整bootstrap样式表。问题是我在bootstrap或CSS布局方面都不擅长...... 这就是为什么我来寻求专业人士的知识。所以我想要的是：

阻止navibar分成两行;
尽可能使navibar可显示（不折叠）（考虑到我必须使用的宽度空间才能显示它，当宽度太短使其崩溃时）。
仅通过CSS执行（如果可能）。

以下是代码：

标记：

<!DOCTYPE html>
<html lang = "en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Royal Designs</title>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.js" type="text/javascript"></script>
</head>

<body>

<header> <!-- Header Section -->

    <!-- Responsive Navigation links and Search box -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <!-- Logo and dropdown button in smaller viewports -->
            <div class="navbar-header">
                <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarCollapse" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button> 
                <a href="/"><div class="nav-brand"></div></a>
            </div> <!-- end of nav-header -->
            <!-- Links in dropdown button in smaller viewports -->
            <div class="collapse navbar-collapse navbar-right" id="navbarCollapse">
                <ul class="nav navbar-nav navbar-left">
                    <li class="active"><a href="#">Início</a></li>
                    <li><a href="#">Sobre Nós</a></li>
                    <li><a href="#">Serviços</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contato</a></li>
                    <!-- Search bar and Submit button -->
                    <form class="navbar-form navbar-right" role="search">
                        <div class="input-group">
                            <label for="searchbox">
                                <input id="searchbox" class="form-control" type="text" placeholder="Search for..." name="searchbox">
                            </lable>
                            <div class="input-group">
                                <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                            </div> <!-- input-group -->
                        </div> <!-- input-group -->
                    </form>
                </ul>
            </div> <!-- end of collapse-->
        </div> <!-- end of container-fluid -->
    </nav> <!-- end of navbar -->

</header><!-- End of header Section -->
</body>
</html>

CSS：我尝试过如此狡猾的事情，我找到了一个解决方案，我不知道它会影响到什么。添加了Brad博士建议的更改。样式表如下：

/* ------    Media query: do navbar collapse due to viewport    -----*/
@media (max-width: 900px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav li {
        float: none;
        width: 100%;
        min-width: 880px;
        overflow: none;
        white-space: nowrap;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
/* --------   End Collapsed Navbar Media Query    --------*/

及时：将引导媒体查询从768px更改为900px（我测试了它），但如果可能的话，我希望通过CSS提供替代解决方案。

思考：我认为从头开始执行此操作可能不那么痛苦，而不是在引导程序样式表上执行此操作（如果我只是在CSS中很好...）。对争议持开放态度。

注意：我没有实例，sry。

Answer 1

您没有提供您正在使用的style.css文件，因此确定如何解决问题会有点困难。我最好的选择是为＆lt; li＆gt;设置样式。宽度：100％;如果问题继续，请添加最小宽度：880px;另一种选择是溢出：无;并添加white-space：nowrap;。再次提供的信息我不能说这会有效，但值得一试。

无法阻止导航栏在bootstrap 3.3.7中突破两行。

1 个答案: