如何使下拉菜单超出父列的宽度？

Question

I have a dropdown with 3 main "categories" inside, and each "category" has several checkboxes (this is being used to filter a search). Here's an example of my code:

 <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://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="col-3 dropdown"> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Button</button> <div class="dropdown-menu"> <div class="dropdown-item"> <div class="row"> <div class="col"> <h6>Category 1:</h6> <ul class="list-group"> <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li> <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li> <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li> </ul> </div> <div class="col"> <h6>Category 2:</h6> <ul class="list-group"> <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li> <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li> <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li> </ul> </div> <div class="col"> <h6>Category 3:</h6> <ul class="list-group"> <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li> <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li> <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li> </ul> </div> </div> </div> </div> </div> 

As you may have noticed, the dropdown div is also a col-3 . Basically, I want the dropdown menu to occupy more horizontal space than the col-3 (like text-nowrap does with simple text inside a div ).
Here's an example of what I want it to look like:

 <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://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Button</button> <div class="dropdown-menu"> <div class="dropdown-item"> <div class="row"> <div class="col"> <h6>Category 1:</h6> <ul class="list-group"> <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li> <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li> <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li> </ul> </div> <div class="col"> <h6>Category 2:</h6> <ul class="list-group"> <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li> <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li> <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li> </ul> </div> <div class="col"> <h6>Category 3:</h6> <ul class="list-group"> <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li> <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li> <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li> </ul> </div> </div> </div> </div> </div> 

Answer 1

By default, Bootstrap applies position:relative to the .dropdown class. If you want the child element of the dropdown to extend beyond the dropdown, then add a class to the dropdown to override position:relative . Here I have added the .extended class.

 <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://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <style> .extended { position: initial !important; } </style> <div class="col-3 dropdown extended"> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Button</button> <div class="dropdown-menu"> <div class="dropdown-item"> <div class="row"> <div class="col"> <h6>Category 1:</h6> <ul class="list-group"> <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li> <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li> <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li> </ul> </div> <div class="col"> <h6>Category 2:</h6> <ul class="list-group"> <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li> <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li> <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li> </ul> </div> <div class="col"> <h6>Category 3:</h6> <ul class="list-group"> <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li> <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li> <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li> </ul> </div> </div> </div> </div> </div>