Question

我正在使用带有rails 5的bootstrap 4，并且正在尝试构建折叠导航栏：崩溃和功能正常工作，但由于某种原因，折叠导航栏的大小非常小：{{3} }

当网站上的示例给出：

除了导航栏，我的文字大小也要小得多。我没有在附加到导航栏的尺寸方面有任何特殊的CSS，所以我很困惑为什么它明显小于默认尺寸。

_navigationbar.html.erb：

application.html.erb：

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
    <!-- Brand -->
   <!-- <a class="navbar-brand" href="#">brand</a>-->

    <!-- Links -->
    <div id="myNavbar">
        <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
        <div class="collapse navbar-toggleable-md" id="navbarResponsive">
            <ul class="nav nav-pills navbar-nav" id="nav-colors">
                <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
                <li class="nav-item"><a class="nav-link" href="#contact">Contact Us</a></li>
            </ul>
        </div>
    </div>
</nav>

非常感谢任何帮助。谢谢！

Answer 1

感谢Michael Coker，这个问题很容易解决：我只是添加了一行：

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

到application.html.erb的head部分，它们都自行解决了。

Answer 2

从截图中看，您看起来像是在移动设备上，而且所有内容（不仅仅是引导程序导航）都非常小。通常，这是来自缺少的元视口标记，这会导致您的内容在较小的设备上向上扩展。尝试将此添加到您网站的<head>。

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

Bootstrap 4导航栏在中型或小型设备上非常薄

2 个答案: