Question

我有一个基础网站，我正在建设学习Bootstrap。在Firefox和11上，该网站按预期工作。网格系统正常工作，导航将按预期折叠并切换汉堡包图标。

在Chrome上导航开始略低于992px以覆盖正确的链接，它不会折叠/切换汉堡包图标。

为什么它不能用于Chrome？

到目前为止，我已将此作为我的代码，请提前感谢您：

<!doctype html>

<head>
    <meta charset="utf-8">
    <title>Testing Bootstrp</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>
    <div class='navbar navbar-default navbar-fixed-top'>
        <div class='container'>
            <div class='navbar-header'>
                <a href='#' class='navbar-brand'>
                        WELCOME TO MY WORLD
                    </a>
                <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>
            </div>
            <ul class='nav navbar-nav navbar-right collapse navbar-collapse'>
                <li><a href="#">HOME</a></li>
                <li><a href="#">Testimonails</a></li>
                <li><a href="#">Insurance</a></li>
            </ul>
        </div>
    </div>

这是main.css，没多大意思。

.features .glyphicon {
    font-size: 32px;
    color: purple;
}

body {
    padding-top: 70px;
}

996px

It starts to break here, the grid stops adapting under the 991 mark

Answer 1

尝试将此行代码添加到head部分：

<meta name="viewport" content="width=device-width, initial-scale=1">

bootstrap不使用chrome（firefox，即工作正常）

1 个答案: