时间戳

首页 > 解决方案 > 移动设备上的 HTML 导航栏内联项目

html - 移动设备上的 HTML 导航栏内联项目

问题描述

这是我的导航栏（使用 Bootstrap 4）：

<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom" style="height: 60px;">
  <a class="navbar-brand text-blue font-weight-bold nav-link">Car Shop</a>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a href="cars.html" class="nav-link text-light" style="" id="nav_cars">Cars</a>
      <a href="engine.html" class="nav-link text-light" style="" id="nav_engine">Engine</a>
      <button type="submit" class="btn" name="create" style="background-color: #ffec00!important; position: absolute; margin-right: 0px; right: 15px; top: 11px;">Log Out</button>
    </div>
  </div>
</nav>

所以除了主标题 Cars Shop 之外，还有三个项目：

在桌面上看起来不错，但是当我切换到移动设备（或适当调整窗口大小）时，这三个项目完全消失了。有什么方法可以让这个导航栏更加用户友好吗？

标签： htmlcssbootstrap-4

解决方案

据我所知，问题在于您正在使用折叠的导航栏，而无法在折叠后打开它。我为折叠菜单修复了这样的问题（您需要稍微改变一下样式以使其看起来不错）：

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

        <nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom" style="height: 60px;">
          <a class="navbar-brand text-blue font-weight-bold nav-link">Car Shop</a>
          <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <i class="fa fa-angle-double-down"></i>
          </button>
        
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="navbar-collapse collapse" id="navbarSupportedContent">
              <a href="cars.html" class="nav-link text-dark" style="" id="nav_cars">Cars</a>
              <a href="engine.html" class="nav-link text-dark" style="" id="nav_engine">Engine</a>
              <button type="submit" class="btn" name="create" style="background-color: #ffec00!important; position: absolute; margin-right: 3em; right: 15px; top: 11px;">Log Out</button>
            </div>
          </div>
        </nav>

如果您还没有使用 em、vh、vw 而不是 px，我还建议您在单独的文件中执行 CSS。

推荐阅读