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

我遇到了这个奇怪的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>`

---

请帮我解决搜索栏的问题。提前感谢。

看起来问题出在

标记的父项上。这是一个

，低于

768px

，它会断开。我也有同样的问题。请尝试一下：

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

较小屏幕中的

float:left

被删除。试试这个？这将默认用于所有

.navbar表单.search表单

，我希望没有其他表单使用相同的类

---

另外，如果您添加一个

id

比如说

#搜索表单

就更好了，然后您就可以这样定位它。

我们有什么地方可以看到这个直播吗？或者什么？啊。。。好的，这是自举吗？是的。我没有更改它。请尝试使您的代码更具响应性，尝试添加媒体查询，以查询您观察问题的解决方案。您如何知道表单标记的父项是div？代码中没有显示它。@对不起。不是父母。哈哈。@PraveenKumar啊，好吧，现在更有意义了！：）@别再嘲笑我了。不是嘲笑，意思是博学。

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