Bootstrap 4 导航栏不会在平板电脑上折叠答案

【问题标题】：Bootstrap 4 navbar doesnt collapse on tabletBootstrap 4 导航栏不会在平板电脑上折叠
【发布时间】：2021-02-02 09:52:25
【问题描述】：

我已经下载并定制了一个简单的 bootstrap 4 主题。在自定义下，我的意思是我为meni项目添加了相同的边距，并且我添加了我的徽标。

我的问题是，在平板电脑上，导航栏不是折叠标志，我附上它的照片。

And you can view my demo site here.

    <nav class="navbar navbar-expand-lg bg-white" id="site_navigation"> 
    <a class="navbar-brand" href="<?php echo $host; ?>" title="">
        <img src="<?php echo $host; ?>/images/assets/logo2.png" class="img-responsive site_logo" alt=""/>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> 
        <span class="navbar-toggler-icon"><i class="fa fa-bars navbar_ikon"></i></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Szolgáltatások</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div>
      </li>
      <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Bemutatkozás</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div>
      </li>
      <li class="nav-item"> <a class="nav-link" href="<?php echo $host; ?>/webaruhaz-keszites">Webáruház készítés</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Referenciák</a> </li>
      
    </ul>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item"> <a class="nav_link_last_1" href="#"><i class="fa fa-envelope"></i> Kapcsolatfelvétel</a> </li>  
      <li class="nav-item"> <a class="nav_link_last_2" href="#"><i class="fa fa-file"></i> Árajánlat kérése</a></li>
    </ul>
  </div>
</nav>

照片在这里。平板电脑上的徽标在哪里，菜单项发生了什么？

【问题讨论】：

它对我有用：mobiletest.me/ipad_mini_emulator/?u=https://betontermekem.hu/# 您还可以通过开发者控制台或快捷键 (Ctrl+Shift+M) 测试响应能力

标签： html css bootstrap-4 responsive-design

【解决方案1】：

这是正常的，因为崩溃发生在 992px。当您在平板电脑上查看横向视图时，可能超出了此限制。即使使用浏览器检查工具，它也会以这种方式显示。所以只需设置类扩展xl 而不是lg。

或者你可以设置更小的font-size。

【讨论】：

expand-xl 有什么作用？我的意思是，如果我的电脑的显示器只有 1024x768px 分辨率，导航会被隐藏，而只会显示导航栏切换按钮？
是的，这就是为什么我认为管理font-size 不是一个坏主意，因为相同的视图将显示在屏幕笔记本电脑上
@steve777 看看：getbootstrap.com/docs/4.0/content/typography
字体大小？它不大。为什么我要把它弄小一点？
因为您的图片至少在 1024 像素以下时会与文本对齐。也许试试大众单位

【解决方案2】：

你只有在横向模式下才有问题，对吧？

解决方案 #1

将navbar-expand-lg 更改为navbar-expand-xl

解决方案 #2

在您的 .css 中设置一个与 iPad 宽度相同的新断点，并从下一个较低的断点复制导航栏的 css。

我认为应该是 1024px 所以：

@media (min-width: 1024px){

}

您还可以组合两个断点，并使用最小宽度和最大宽度为 1024 的断点创建一个断点，因此它正好适合这个宽度。

【讨论】：