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然后你可以这样定位。

搜索栏中的CSS问题在较小的屏幕中显示

1 个答案: