html - 较小屏幕中搜索栏形式的 CSS 问题

Question

我遇到了这个奇怪的 CSS 问题。当我使用大于 700px 的页面宽度时，它看起来不错。但是同样的事情，当我将它调整为小于 700px >(我不确定尺寸是否正确)，它变得疯狂变形。宽度之间没有太大区别。

我有以下可能相关的 HTML 和 CSS:

<form class="navbar-form search-form" role="search" form="" action="" method="post" onsubmit="return validate()" style="margin:0px 0px 0px 0px;">
  <div class="form-group ">
    <input type="text" name="s" id="search" size="27" class="form-control form-search search-text ac_input" placeholder="Type your search..." autocomplete="off">
  </div>
  <button type="submit" class="btn search-home  " name="subm">
    <span class="glyphicon glyphicon-search white"></span>
  </button>
</form>`

这是来自 BootStrap 的相应 CSS:

@media (min-width: 768px) {
  .navbar-form {
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
.navbar-form {
  padding: 10px 15px;
  margin-top: 8px;
  margin-right: -15px;
  margin-bottom: 8px;
  margin-left: -15px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);
}

请帮我解决修复搜索栏的问题。提前致谢。

Answer 1

看起来问题出在 <input /> 上标签的父级。那是一个 <div class="form-group">及以下768px ，它坏了。我遇到过同样的问题。请试试这个:

.navbar-form.search-form .form-group {
  float: left;
}

float: left在较小的屏幕中被删除。尝试这个？这将默认为所有 .navbar-form.search-form我希望没有其他表单使用相同的类。

此外，最好添加一个 id比如说，#search-form然后你可以这样定位它。