在以较小的分辨率对齐导航栏内的搜索输入和提交按钮时遇到问题

如何解决在以较小的分辨率对齐导航栏内的搜索输入和提交按钮时遇到问题

当我意识到网页的搜索框和旁边的提交按钮（在最大屏幕宽度处向右对齐）在最大宽度很小时会错位时，我正在对网页进行搜索。

我使用的是Bootstrap 4，因此我使用“ .ml-auto”将这些元素与导航栏的左侧对齐，除了在这种情况下，它工作正常（因为我知道导航栏中的元素在Bootstrap中的行为有所不同）。 CSS和js文件已正确导入（在编写此文件之前请确保已导入）。以下是一些代码片段，因此您可以看到问题所在：

• HTML

    <div class="container">
    <header id="head">
        <h1 class="page-header float-left">bitDump</h1>
        <div class="clearfix"></div>
    </header>
    <section id="mainBody">
        <nav class="navbar navbar-expand-sm navbar-dark navbar-tweak">
            <form class="form-inline my-2 my-md-0 ml-auto">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0 ml-auto" type="submit">O</button>
            </form>
        </nav>
    </section>
  

• 自定义CSS（与Bootstrap互补）

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #000;
}

a:hover {
  text-decoration: none;
  color: #000;
}

body {
  font-family: Arial,Helvetica,sans-serif;
  background-color: #ddd;
  font-weight: normal;
} 

.navbar-tweak {
    border-radius: 5px;
    background-color: #6c757d;
    border-color: #5a6268;
    transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
}
.page-header {
  padding-bottom: 5px;
  margin: 20px 0 10px;
  border-bottom: 1px solid #eee;
}

在垂直手机分辨率（iirc为360px宽）上，https://www.codeply.com/p/T3d3CgZcya中可以看到未对齐的情况

有什么想法要解决吗？

解决方法

只需添加此样式：

@media (max-width: 480px){
  .form-control{
    width: auto;
  }
}

当前您正在使用width: 100%，因此输入占用了所有空间，并且按钮没有剩余空间。