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

Question

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

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

    <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>

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

Answer 1

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

解决方案 #1

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

解决方案 #2

在您的 .css 横向模式下设置宽度为 iPad 的新断点，并从下一个较低的断点复制导航栏的 css。

我觉得应该是1024px所以:

@media (min-width: 1024px){

}

你也可以把两个断点结合起来，比如用min-width和max-width做一个1024的断点，刚好适合这个宽度。

Answer 2

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

或者你可以设置小一些font-size。

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

Bootstrap 4 navbar doesnt collapse on tablet

html

css

responsive-design

bootstrap-4

解决方案 #1

解决方案 #2