Question

我有一个使用Symfony制作的网站，并且有一个带有class = multiselect-container下拉菜单的下拉菜单

除非我尝试缩小窗口，否则效果很好：当＆＃34;位置块＆＃34;在下拉菜单下;下降消失并且不可克服：

https://drive.google.com/open?id=0B2bmESDsWIPoRWtROTREWnVMTmM

这是代码：

<!-- form-category -->

 <form name="" method="get" action="/en/listing/search_result" class="form-category alt col-xs-12">



<fieldset>
<legend class="hidden">form-category</legend>
<div class="form-holder">
    <div class="col categories">
        <strong class="title">
                <label for="categories">
                                Categories

        </label>
        </strong>

        <div class="multiselect">
                <select id="categories" name="categories[]" multiple="multiple">
                    <optgroup label="Kitesurf Rental">
            </optgroup>                <optgroup label="&amp;#160;&amp;#160;&amp;#160;Kite">
            </optgroup>                <option value="33">
            &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;Bow kite
        </option>                <option value="34">
            &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;Delta kite
        </option>                <option value="35" selected="selected">
            &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;Hybrid kite
        </option>                <option value="45">
            &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;C-KITE
        </option>                <optgroup label="&amp;#160;&amp;#160;&amp;#160;Board">
            </optgroup>                <option value="50">
            &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;Wake-style Board Boots
        </option>                <option value="27">

       &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;Surfboard 
      for kiteboarding
        </option>                <option value="47">
            &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;Foil 
       Board
        </option>                <option value="48">
            &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;Race 
        board
        </option>                <option value="49">

      &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;Twin-tip
        </option>                <option value="51">

      &amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;&amp;#160;Wakeskate
        </option>                <option value="52">
            &amp;#160;&amp;#160;&amp;#160;Kitesurf accessories
        </option>                <option value="64">
            &amp;#160;&amp;#160;&amp;#160;Buggy rental
        </option>                <optgroup label="Wetsuit /Drysuit">
            </optgroup>                <option value="32">
            &amp;#160;&amp;#160;&amp;#160;Wetsuit
        </option>                <option value="37">
            &amp;#160;&amp;#160;&amp;#160;Drysuit
        </option>                <optgroup label="Stand Up Paddle / Canoe 
      Kayak">
            </optgroup>                <option value="20">
            &amp;#160;&amp;#160;&amp;#160;Inflatable
        </option>                <option value="28">
            &amp;#160;&amp;#160;&amp;#160;Surf SUP
        </option>                <option value="29">
            &amp;#160;&amp;#160;&amp;#160;Flatwater
        </option>                <option value="30">
            &amp;#160;&amp;#160;&amp;#160;Flatwater
        </option>                <option value="31">
            &amp;#160;&amp;#160;&amp;#160;Race SUP
        </option>                <option value="62">
            &amp;#160;&amp;#160;&amp;#160;Kayak / Canoe
        </option>                <optgroup label="Surf">
            </optgroup>                <option value="44">
            &amp;#160;&amp;#160;&amp;#160;Hybrid
        </option>                <option value="43">
            &amp;#160;&amp;#160;&amp;#160;Gun
        </option>                <option value="42">
            &amp;#160;&amp;#160;&amp;#160;Fish
        </option>                <option value="41">
            &amp;#160;&amp;#160;&amp;#160;Longboard
        </option>                <option value="40">
            &amp;#160;&amp;#160;&amp;#160;Funboard
        </option>                <option value="39">
            &amp;#160;&amp;#160;&amp;#160;Shortboard
        </option>                <optgroup label="Diving">
            </optgroup>                <option value="57">
            &amp;#160;&amp;#160;&amp;#160;Console Gauges
        </option>                <option value="56">
            &amp;#160;&amp;#160;&amp;#160;Nitrox Computer
        </option>                <option value="55">
            &amp;#160;&amp;#160;&amp;#160;Regulator
        </option>                <option value="54">
            &amp;#160;&amp;#160;&amp;#160;Vest BCD
        </option>                <option value="58">
            &amp;#160;&amp;#160;&amp;#160;Octopus or Alternate Air Source
        </option>                <option value="59">
            &amp;#160;&amp;#160;&amp;#160;Air Tank
        </option>                <option value="60">
            &amp;#160;&amp;#160;&amp;#160;Weight and/or Weight Belt
        </option>                <option value="61">
            &amp;#160;&amp;#160;&amp;#160;Scuba accessories
        </option>                <option value="63">
            MTB Mountainboard rental
        </option></select>

        </div>
    </div>


    <div class="col location">
        <strong class="title">
                <label for="location_address">
                                Place

        </label>
        </strong>

        <div class="field-holder">

CSS

.multiselect-container {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0

}

.multiselect-container .input-group {
    margin: 5px
}

.multiselect-container > li {
    padding: 0
}

.multiselect-container > li > a.multiselect-all label {
    font-weight: 700
}

.multiselect-container > li.multiselect-group label {
    margin: 0;
    padding: 3px 20px 3px 20px;
    height: 100%;
    font-weight: 700
}

.multiselect-container > li.multiselect-group-clickable label {
    cursor: pointer
}

.multiselect-container > li > a {
    padding: 0
}

.multiselect-container > li > a > label {
    margin: 0;
    height: 100%;
    cursor: pointer;
    font-weight: 400;
    padding: 3px 20px 3px 40px
}

.multiselect-container > li > a > label.radio, .multiselect-container > li > a > label.checkbox {
    margin: 0
}

.multiselect-container > li > a > label > input[type=checkbox] {
    margin-bottom: 5px
}

.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.form-inline .multiselect-container label.checkbox, .form-inline .multiselect-container label.radio {
    padding: 3px 20px 3px 40px
}

.form-inline .multiselect-container li a label.checkbox input[type=checkbox], .form-inline .multiselect-container li a label.radio input[type=radio] {
    margin-left: -20px;
    margin-right: 0
}

如果你知道我能做什么？

谢谢

Answer 1

问题是引导程序已经过时，我只需要将链接更改为新的引导程序版本https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

下拉多选消失

1 个答案: