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

标签 html css twitter-bootstrap

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

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

最佳答案

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

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

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

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

关于html - 较小屏幕中搜索栏形式的 CSS 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34640759/

相关文章:

javascript - 如何映射来自不同来源的图像和文本?

html - 使用 -webkit-rotate 时 Z-Index 不工作

jquery - 如何将 primefaces 按钮悬停效果添加到 html 按钮

javascript - 如何禁用 Bootstrap datetimepicker

jquery - 具有自定义背景图像的可变高度 div - 最好的技术是什么?

HTML5 可访问性测试?

Javascript TweenMax 不工作

html - 如何在我的网站上将图片与导航栏水平对齐?另外,我的导航栏上的边框乱七八糟?帮助初学者?

html - 使用 Flex box 或 Bootstrap 固定和滚动的列

html - div 类中的右对齐元素