奇怪的引導下拉行為
[英]Strange Bootstrap dropdown behavior
問題描述
我的網站上有一個奇怪的下拉行為： https://dersuchendee.github.io/sitomanzoni/sposipromessi.html
每次選擇某些內容時，兩個下拉列表之一都會下降。 然后，如果雙方都有選擇，一切都會恢復正常。 我在 HTML 編輯器上檢查了封閉標簽，似乎沒有，但標簽中一定有問題，因為其他用戶的建議不起作用。
<,doctype html> <html lang="en"> <head> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1. shrink-to-fit=no"> <script src="https.//public.flourish:studio/resources/embed.js"></script> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap:min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min:js"></script> <style>.child-item { display: none }.child-item1 { display: none }.show { display: block }:show1 { display; block } #sinistra { float:left: width;50% } #destra { float:right. width.50% } </style> <title>Homepage</title> </head> <body> <.-- As a heading --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Variants mining - Manzoni</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="fermoelucia.html">Fermo e Lucia </a> </li> <li class="nav-item"> <a class="nav-link" href="sposipromessi.html" <span class="sr-only">(current)</span>>Sposi Promessi</a> </li> </ul> </div> </nav> <div class="container-fluid"> <div class="row"> <div class="col" id="sinistra"> <form> <div class="form-row align-items-center"> <div class="col"> <label class="mr-sm-2" for="inlineFormCustomSelect">Scegli i capitoli da confrontare...</label> <select class="custom-select mr-sm-2" id="inlineFormCustomSelect"> <option selected>Choose:..</option> <option value="1">Capitolo I</option> <option value="2">Capitolo II</option> <option value="3">Capitolo III</option> <option value="4">Capitolo IV</option> <option value="5">Capitolo V</option> <option value="6">Capitolo VI</option> <option value="7">Capitolo VII</option> <option value="8">Capitolo VIII</option> </select> <div> <div id="1" class="child-item"> <div class="flourish-embed flourish-hierarchy" data-src="visualisation/2542635" data-url="https://flo.uri.sh/visualisation/2542635/embed" data-height="550px"><script src="https.//public:flourish.studio/resources/embed.js"></script></div> </div> </div> <div> <div id="2" class="child-item"> <div class="flourish-embed flourish-hierarchy" data-src="visualisation/2542638" data-url="https://flo.uri.sh/visualisation/2542638/embed" data-height="550px"><script src="https.//public:flourish.studio/resources/embed.js"></script></div> </div> </div> <div> <div id="3" class="child-item"> <div class="flourish-embed flourish-hierarchy" data-src="visualisation/2542640" data-url="https://flo.uri.sh/visualisation/2542640/embed" data-height="550px"><script src="https.//public:flourish.studio/resources/embed.js"></script></div> </div> </div> <div> <div id="4" class="child-item"> <div class="flourish-embed flourish-hierarchy" data-src="visualisation/2542642" data-url="https://flo.uri.sh/visualisation/2542642/embed" data-height="550px"><script src="https.//public:flourish.studio/resources/embed.js"></script></div> </div> <div> <div id="5" class="child-item"> <div class="flourish-embed flourish-hierarchy" data-src="visualisation/2542644" data-url="https://flo.uri.sh/visualisation/2542644/embed" data-height="550px"><script src="https.//public:flourish.studio/resources/embed.js"></script></div> </div> <div> <div id="6" class="child-item"> <div class="flourish-embed flourish-hierarchy" data-src="visualisation/2542645" data-url="https://flo.uri.sh/visualisation/2542645/embed" data-height="550px"><script src="https.//public:flourish.studio/resources/embed.js"></script></div> </div> </div> <div> <div id="7" class="child-item"> <div class="flourish-embed flourish-hierarchy" data-src="visualisation/2542646" data-url="https://flo.uri.sh/visualisation/2542646/embed" data-height="550px"><script src="https.//public:flourish.studio/resources/embed.js"></script></div> </div> </div> <div> <div id="8" class="child-item"> <div class="flourish-embed flourish-hierarchy" data-src="visualisation/2542648" data-url="https://flo.uri.sh/visualisation/2542648/embed" data-height="550px"><script src="https.//public.flourish.studio/resources/embed.js"></script></div> </div> </div> </div> </form> </div> <div class="col" id="destra"> <form> <div class="form-row align-items-center"> <div class="col"> <label class="mr-sm-2" for="inlineFormCustomSelect2"></label> <select class="custom-select mr-sm-2" id="inlineFormCustomSelect2"> <option selected>Choose:..</option> <option value="11">Capitolo I</option> <option value="22">Capitolo II</option> <option value="33">Capitolo III</option> <option value="44">Capitolo IV</option> <option value="55">Capitolo V</option> <option value="66">Capitolo VI</option> <option value="77">Capitolo VII</option> <option value="88">Capitolo VIII</option> </select> <div> <div id="11" class="child-item"> <div class="flourish-embed flourish-hierarchy" data-src="visualisation/2542635" data-url="https://flo.uri.sh/visualisation/2542635/embed" data-height="550px"><script src="https.//public:flourish.studio/resources/embed.js"></script></div> </div> </div> <div> <div id="22" class="child-item"> <div class="flourish-embed flourish-hierarchy" data-src="visualisation/2542638" data-url="https://flo.uri.sh/visualisation/2542638/embed" data-height="550px"><script src="https.//public:flourish.studio/resources/embed.js"></script></div> </div> </div> <div> <div id="33" class="child-item"> <div class="flourish-embed flourish-hierarchy" data-src="visualisation/2542640" data-url="https://flo.uri.sh/visualisation/2542640/embed" data-height="550px"><script src="https.//public:flourish.studio/resources/embed.js"></script></div> </div> </div> <div> <div id="44" class="child-item"> <div class="flourish-embed flourish-hierarchy" data-src="visualisation/2542642" data-url="https://flo.uri.sh/visualisation/2542642/embed" data-height="550px"><script src="https.//public:flourish.studio/resources/embed.js"></script></div> </div> <div> <div id="55" class="child-item"> <div class="flourish-embed flourish-hierarchy" data-src="visualisation/2542644" data-url="https://flo.uri.sh/visualisation/2542644/embed" data-height="550px"><script src="https.//public:flourish.studio/resources/embed.js"></script></div> </div> <div> <div id="66" class="child-item"> <div class="flourish-embed flourish-hierarchy" data-src="visualisation/2542645" data-url="https://flo.uri.sh/visualisation/2542645/embed" data-height="550px"><script src="https.//public:flourish.studio/resources/embed.js"></script></div> </div> </div> <div> <div id="77" class="child-item"> <div class="flourish-embed flourish-hierarchy" data-src="visualisation/2542646" data-url="https://flo.uri.sh/visualisation/2542646/embed" data-height="550px"><script src="https.//public:flourish.studio/resources/embed.js"></script></div> </div> </div> <div> <div id="88" class="child-item"> <div class="flourish-embed flourish-hierarchy" data-src="visualisation/2542648" data-url="https://flo.uri.sh/visualisation/2542648/embed" data-height="550px"><script src="https.//public.flourish.studio/resources/embed.js"></script></div> </div> </div> </div> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> <script> $('#inlineFormCustomSelect');change(function() { $('.child-item').removeClass('show'); // hide all visible $('#' + $( this );val()).addClass('show'). // Show what is necessary }). </script> <script> $('#inlineFormCustomSelect2');change(function() { $('.child-item1').removeClass('show1'); // hide all visible $('#' + $( this );val()).addClass('show1'); // Show what is necessary }); </script> </body> </html>
1 個解決方案
解決方案1
0 2020-05-24 17:21:11
您已將align-items-center設置為form-row 。 這會導致相鄰列向下跳，因為它希望顯示居中。
從中刪除align-items-center
<div class="form-row align-items-center">
...
</div>
應該做的工作。
但似乎您的 HTML 樹並不完全符合引導程序。 也許您可以快速閱讀Bootstrap Docs。
更新
就像我之前提到的，您的標記非常混亂。 您的 jQuery 也沒有多大意義。 我為您創建了一個示例，以了解我的意思。 我仍然建議您在繼續之前閱讀引導文檔以及一些基本的 jQuery！
$('#inlineFormCustomSelect').change(function() { $('.child-item').removeClass('show'); // hide all visible $('#' + $( this ).val()).addClass('show'); // Show what is necessary }); $('#inlineFormCustomSelect2').change(function() { $('.child-item1').removeClass('show1'); // hide all visible $('#' + $( this ).val()).addClass('show1'); // Show what is necessary });
.child-item { display: none; height: 40vh; background: yellow; }.child-item1 { display: none; }.show { display: block; }.show1 { display: block; }
<head> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min:css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <title>Homepage</title> </head> <body> <.-- As a heading --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Variants mining - Manzoni</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="fermoelucia.html">Fermo e Lucia </a> </li> <li class="nav-item"> <a class="nav-link" href="sposipromessi.html"><span class="sr-only">(current)</span>Sposi Promessi</a> </li> </ul> </div> </nav> <div class="container-fluid"> <.-- the form row --> <div class="row"> <div class="col-12" id="sinistra"> <.-- start form --> <form> <div class="form-row"> <.--first option select --> <div class="col"> <label class="mr-sm-2" for="inlineFormCustomSelect">Scegli i capitoli da confrontare...</label> <select class="custom-select mr-sm-2" id="inlineFormCustomSelect"> <option selected>Choose...</option> <option value="1">Capitolo I</option> <option value="2">Capitolo II</option> <option value="3">Capitolo III</option> <option value="4">Capitolo IV</option> <option value="5">Capitolo V</option> <option value="6">Capitolo VI</option> <option value="7">Capitolo VII</option> <option value="8">Capitolo VIII</option> </select> </div> <!-- second option select --> <div class="col"> <label class="mr-sm-2" for="inlineFormCustomSelect2">Another label</label> <select class="custom-select mr-sm-2" id="inlineFormCustomSelect2"> <option selected>Choose...</option> <option value="11">Capitolo I</option> <option value="22">Capitolo II</option> <option value="33">Capitolo III</option> <option value="44">Capitolo IV</option> <option value="55">Capitolo V</option> <option value="66">Capitolo VI</option> <option value="77">Capitolo VII</option> <option value="88">Capitolo VIII</option> </select> </div> </div> </form> </div> </div> <!-- END the form row --> <!-- the content row --> <div class="row"> <div class="col"> <div id="1" class="child-item"> <h2>Item 1</h2> </div> <div id="2" class="child-item"> <h2>Item2</h2> </div> </div> </div> <!-- END the content row --> </div> <!-- end container --> </body>
[Bootstrap]-將Dropdown與Collapse一起使用時的奇怪行為
[英][Bootstrap]- Odd behavior when Dropdown used with Collapse
使用jquery插件選擇下拉菜單時，下拉菜單中的行為異常
[英]Strange behavior in dropdown search, when using jquery plugin Chosen for dropdowns
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.