菜單標題下方的位置下拉菜單

Question

我試圖將我的下拉菜單正確放置在我的菜單標題下，如下圖所示。我最多隻能把它放在旁邊，但是有可能實現我的目標嗎？

這裏我FIDDLE ... FIDDLE

請看到我的FIDDLE/BOOTPLY其正確地顯示我的代碼的結果的例子。在SA中它並不正確，對此抱歉。

我的代碼...

$(".btn_clear").on('click', function (e) { 
 
    e.stopPropagation(); 
 
    $(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false); 
 
}); 
 

 
$('.dropdown-menu').click(function(e) { 
 
    e.stopPropagation(); 
 
}); 
 

 
$(".products .checkbox").on("click", function(e) { 
 
    
 
    var i = $("li").index($(this).parent()); 
 
    console.log(i); 
 
    
 
    $('.products .btn_clear').css('background', 'blue'); 
 
    $('.products .btn_apply').css('background', 'green'); 
 
    
 
}); 
 

 
$(".availability .checkbox").on("click", function(e) { 
 
    
 
    var i = $("li").index($(this).parent()); 
 
    console.log(i); 
 
    
 
    $('.availability .btn_clear').css('background', 'blue'); 
 
    $('.availability .btn_apply').css('background', 'green'); 
 
    
 
});

.scrollable-menu { 
 
    height: auto; 
 
    max-height: 200px; 
 
    overflow-x: hidden; 
 
} 
 

 
.checkbox :hover { 
 
     background-color:red; 
 
     cursor:pointer; 
 
    } 
 

 
.div_form :hover { 
 
     background-color:green; 
 
     cursor:pointer; 
 
    } 
 

 
.btn_clear { 
 
    float: right; 
 
\t display: inline-block; 
 
\t box-sizing: border-box; 
 
\t width: 50%; 
 
\t padding: 10px 29px; 
 
\t text-align: center; 
 
    background-color:grey 
 
    } 
 
    
 
.btn_apply { 
 
    float: left; 
 
\t display: inline-block; 
 
\t box-sizing: border-box; 
 
\t width: 50%; 
 
\t padding: 10px 17px; 
 
\t text-align: center; 
 
    background-color:yellow 
 
    } 
 

 

 
.checkbox label, .radio label { 
 
    min-height: 20px; 
 
    padding-left: 30px; 
 
\t padding-right:30px; 
 
    margin-bottom: 0; 
 
    font-weight: 400; 
 
    cursor: pointer; 
 
    width: 100%; 
 
} 
 

 
.div_form { 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t bottom: -70px 
 
} 
 

 
.btn { 
 
\t border-radius:0; 
 
\t margin-top:5px 
 
} 
 

 
.dropdown-menu { 
 
\t border-radius:0; 
 
\t border:5px solid blue; 
 
    position: relative; 
 
    background-color: red; 
 
    border-top-width: 0px; 
 
} 
 

 
.typeahead { 
 
\t width:90%; 
 
\t margin-left:10px 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/> 
 
<div class="btn-toolbar"> 
 
     <!--Default buttons with dropdown menu--> 
 
     <div class="btn-group"> 
 
      <button class="btn btn-primary" type="button">Products</button> 
 
      <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button> 
 
      <div class="dropdown-menu products" style="margin-left: 2em"> 
 
       <div style="position: relative;"> 
 
        <div class=" scrollable-menu" style="margin-bottom: 70px;"> 
 
         <input class="countries" placeholder="Countries" type="text"> <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Alpha</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Beta 
 
        </label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Gamma</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Delta</label> 
 
       </div> 
 
\t \t \t \t <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Omega</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Koppa 
 
        </label> 
 
       </div> 
 
         <div class="div_form"> 
 
          <span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div><!--Success buttons with dropdown menu--> 
 
     <div class="btn-group"> 
 
      <button class="btn btn-primary" type="button">Availability</button> 
 
      <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button> 
 
      <div class="dropdown-menu availability" style="margin-left: 2em"> 
 
       <div style="position: relative;"> 
 
        <div class=" scrollable-menu" style="margin-bottom: 70px;"> 
 
         <input class="typeahead" placeholder="Search values" type="text"> <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> One</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Two 
 
        </label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Nine</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Eight</label> 
 
       </div> 
 
\t \t \t \t <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Seven</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Fifteen 
 
        </label> 
 
       </div> 
 
         <div class="div_form"> 
 
          <span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div><!--Warning buttons with dropdown menu--> 
 
    </div>

Answer 1

在這裏，你走了，我刪除了JavaScript和移除從下拉菜單左邊距和相對定位：http://www.bootply.com/KaP7SiUYVw

.scrollable-menu { 
 
    height: auto; 
 
    max-height: 200px; 
 
    overflow-x: hidden; 
 
} 
 
.checkbox:hover { 
 
    background-color: red; 
 
    cursor: pointer; 
 
} 
 
.div_form:hover { 
 
    background-color: green; 
 
    cursor: pointer; 
 
} 
 
.btn_clear { 
 
    float: right; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    width: 50%; 
 
    padding: 10px 29px; 
 
    text-align: center; 
 
    background-color: grey 
 
} 
 
.btn_apply { 
 
    float: left; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    width: 50%; 
 
    padding: 10px 17px; 
 
    text-align: center; 
 
    background-color: yellow 
 
} 
 
.checkbox label, 
 
.radio label { 
 
    min-height: 20px; 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
    margin-bottom: 0; 
 
    font-weight: 400; 
 
    cursor: pointer; 
 
    width: 100%; 
 
} 
 
.div_form { 
 
    position: absolute; 
 
    bottom: 0; 
 
    bottom: -70px 
 
} 
 
.btn { 
 
    border-radius: 0; 
 
    margin-top: 5px 
 
} 
 
.dropdown-menu { 
 
    border-radius: 0; 
 
    border: 5px solid blue; 
 
    background-color: red; 
 
    border-top-width: 0px; 
 
} 
 
.typeahead { 
 
    width: 90%; 
 
    margin-left: 10px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="btn-toolbar"> 
 
    <!--Default buttons with dropdown menu--> 
 
    <div class="btn-group"> 
 
    <button class="btn btn-primary" type="button">Products</button> 
 

 
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span> 
 
    </button> 
 
    <div class="dropdown-menu products"> 
 
     <div style="position: relative;"> 
 
     <div class=" scrollable-menu" style="margin-bottom: 70px;"> 
 
      <input class="countries" placeholder="Countries" type="text"> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input value="" type="checkbox">Alpha</label> 
 
      </div> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input value="" type="checkbox">Beta 
 
      </label> 
 
      </div> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input value="" type="checkbox">Gamma</label> 
 
      </div> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input value="" type="checkbox">Delta</label> 
 
      </div> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input value="" type="checkbox">Omega</label> 
 
      </div> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input value="" type="checkbox">Koppa 
 
      </label> 
 
      </div> 
 
      <div class="div_form"> 
 
      <span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!--Success buttons with dropdown menu--> 
 
    <div class="btn-group"> 
 
    <button class="btn btn-primary" type="button">Availability</button> 
 
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span> 
 
    </button> 
 
    <div class="dropdown-menu availability"> 
 
     <div style="position: relative;"> 
 
     <div class=" scrollable-menu" style="margin-bottom: 70px;"> 
 
      <input class="typeahead" placeholder="Search values" type="text"> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input value="" type="checkbox">One</label> 
 
      </div> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input value="" type="checkbox">Two 
 
      </label> 
 
      </div> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input value="" type="checkbox">Nine</label> 
 
      </div> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input value="" type="checkbox">Eight</label> 
 
      </div> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input value="" type="checkbox">Seven</label> 
 
      </div> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input value="" type="checkbox">Fifteen 
 
      </label> 
 
      </div> 
 
      <div class="div_form"> 
 
      <span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!--Warning buttons with dropdown menu--> 
 
</div>