スタイリングの追加時にブートストラップ折りたたみパネルが機能しない

検索バーを展開したり折りたたむためのブートストラップ折りたたみパネルがあります。これは、スタイリングなしでうまく動作しますが、スタイリングが追加されたときには、独自の考え方があります。それは、スタイリングが崩壊する途中で変化しているように見えます。その後、それは単に動作を停止します。スタイリングの追加時にブートストラップ折りたたみパネルが機能しない

ここには、スタイリングが添付されたコードがあります。これを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>

出典

2016-10-28 Anonymous

、私はそれが問題になる#search-dropdown-divのdisplay: inline-blockだと思います。

この行を削除しても機能するかどうか教えてください。

出典

2016-10-28 11:15:55

コードを別のHTMLドキュメントに分離しても、自分のウェブサイトでは機能しません。その怒っている。 –

これでOKですが、自分のウェブサイトに展開されますが、トグル時に再び折り畳まれることはありません。 –

そうですね、私はブラウザの互換性を切り離しました。私はこの作業をすべてのブラウザで行いますか？ –

スタイリングの追加時にブートストラップ折りたたみパネルが機能しない

答えて

関連する問題