Question

我设置了一个bootstrap可折叠面板来展开和折叠搜索栏。这样做没有样式，但是当添加样式时，它有自己的想法。看起来样式正在坍塌转变的方式。然后它就会停止工作。

以下是附加了样式的代码。我希望这可以在a href链接上点击。

#search-dropdown-div {
  width: 100%;
  padding: 10px;
  display: inline-block;
  background-color: transparent;
}

#center {
  margin: 0 auto;
  width: 1000px;
  position: relative;
}

#center form {
  position: relative;
}

#center form input[type="search"] {
  width: 100% !important;
  padding: 16px !important;
  border-radius: 10px;
  border-style: none;
  font-size: 20px;
  letter-spacing: 1px;
}

#center form input[type="submit"] {
  background-color: #3A83F3;
  width: 100px;
  padding: 16px;
  margin-left: -100px;
  border-style: none;
  border-radius: 5px;
  color: white;
  position: absolute;
  top: 4px;
  right: 4px;
  float: right;
  letter-spacing: 1px;
}

#center form input[type="submit"]:hover {
  background-color: #0D5C9E;
}

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <meta charset="utf-8">
    <title>Bootstrap Collapse Training</title>
</head>

<body>
    <a class="mag-search" data-toggle="collapse" href="#search-dropdown-div"><i class="fa fa-search" aria-hidden="true"></i>Search</a>
    <div id="search-dropdown-div" class="collapse">
        <div id="center">
            <form role="search">
                <input class="fontAwesome" type="submit" value="Search &#xf084 " />
                <input class="fontAwesome" type="search" placeholder="&#xf002; Search our website..." />
            </form>
        </div>
    </div>
</body>

Answer 1

根据我使用您的代码测试的内容，我认为导致问题的display: inline-block是#search-dropdown-div。

如果你删除这一行，你能告诉我它是否有效吗？

添加样式时，Bootstrap可折叠面板不起作用

1 个答案: