导航项目在移动视图中未对齐

Posted

技术标签:

【中文标题】导航项目在移动视图中未对齐【英文标题】：Nav items are not aligned in mobile view 【发布时间】：2022-01-15 16:54:15 【问题描述】：

当我将屏幕缩小到移动视图时，我的导航项占据了两行。搜索栏和汉堡菜单以及徽标都在不同的位置，我希望它们在一行中。

移动视图：

桌面视图：

任何输入都会被应用。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="apple-touch-icon" sizes="57x57" href="images/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="images/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="images/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="images/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="images/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="images/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="images/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="images/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
    <link rel="manifest" href="images/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="images/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
    <title>Rento</title>
  </head>
  <body>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark justify-content-between">
    <a class="navbar-brand" href="#">
      <img class="logo rounded ms-1" src="images/logo.jpeg"    >
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="col-md-6 col-lg-6 col-11 mx-auto my-auto search-box">
      <div class="input-group form-container">
        <input class="form-control search-input" type="search" placeholder="Search" aria- 
 label="Search" autofocus="autofocus" autocomplete="off">
        <span class="input-group-btn">
          <button class="btn btn-outline-success" type="button" name="button">Search</button>
        </span>
      </div>
    </div>
    <div class="collapse navbar-collapse flex-grow-0" id="navbarTogglerDemo01">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#">Signin</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Cart</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      </ul>
   </nav>
</div>
  </body>
</html>

【问题讨论】：

【参考方案1】：

我将搜索框的col-11 更改为col-6。

<div class="col-md-6 col-lg-6 col-6 mx-auto my-auto search-box">

所以在这种情况下，您可以在所有设备中使用col-6。

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="apple-touch-icon" sizes="57x57" href="images/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="images/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="images/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="images/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="images/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="images/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="images/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="images/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="images/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192" href="images/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
  <link rel="manifest" href="images/manifest.json">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-TileImage" content="images/ms-icon-144x144.png">
  <meta name="theme-color" content="#ffffff">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css">
  <title>Rento</title>
</head>

<body>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark justify-content-between">
    <a class="navbar-brand" href="#">
      <img class="logo rounded ms-1" src="images/logo.jpeg"   >
    </a>
    <div class="col-md-6 col-lg-6 col-6 mx-auto my-auto search-box">
      <div class="input-group form-container">
        <input class="form-control search-input" type="search" placeholder="Search" aria- label="Search" autofocus="autofocus" autocomplete="off">
        <span class="input-group-btn">
          <button class="btn btn-outline-success" type="button" name="button">Search</button>
        </span>
      </div>
    </div>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse flex-grow-0" id="navbarTogglerDemo01">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#">Signin</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Cart</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      </ul>
  </nav>
  </div>
</body>

</html>

【讨论】：

【参考方案2】：

这是因为您的搜索标签的长度很大。要在单行中对齐元素，请调整搜索标签的大小。这将有助于解决这个问题。这里我只是提供了代码供大家参考

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="apple-touch-icon" sizes="57x57" href="images/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="images/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="images/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="images/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="images/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="images/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="images/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="images/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="images/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
    <link rel="manifest" href="images/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="images/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
    <title>Rento</title>
  </head>
  <body>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark justify-content-between">
    <a class="navbar-brand" href="#">
      <img class="logo rounded ms-1" src="images/logo.jpeg"    >
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="col-md-5 col-lg-5 col-5 mx-auto my-auto search-box">
      <div class="input-group form-container">
        <input class="form-control search-input" type="search" placeholder="Search" aria- 
 label="Search" autofocus="autofocus" autocomplete="off">
        <span class="input-group-btn">
          <button class="btn btn-outline-success" type="button" name="button">Search</button>
        </span>
      </div>
    </div>
    <div class="collapse navbar-collapse flex-grow-0" id="navbarTogglerDemo01">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#">Signin</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Cart</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      </ul>
   </nav>
</div>
  </body>
</html>

【讨论】：

以上是关于导航项目在移动视图中未对齐的主要内容，如果未能解决你的问题，请参考以下文章

具有自定义视图的 UIBarButtonItem 在 iOS 7 上用作左侧或右侧导航栏项目时未正确对齐

UIBarButtonItem在用作左侧或右侧导航栏项目时，自定义视图未在iOS 7上正确对齐

如何更改折叠导航栏中项目的对齐方式？

uiView 在 iOS10 的 ViewController 中未对齐，但不是 iOS11

导航栏按钮项目“撰写”在转场期间向右移动

iOS 13 中第二个视图控制器的导航栏按钮对齐错误