我不确定你是否可以设计原生下拉列表的样式，这样它的选项就占用了页面上的空间，所以我提供了一个替代方案，使用自定义下拉列表来获得你想要的结果。

检查此：

// Get all elements needed
const dropdownBtn = document.querySelector('.dropdown-btn');
const dropdownList = document.querySelector('.dropdown-list');

// Event listener to toggle the dropdown list visibility
dropdownBtn.addEventListener('click', () => {
  dropdownList.classList.toggle('show');
});

// Event listener for option selection
dropdownList.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    const selectedOption = event.target.textContent;
    // Display the selected option in the button
    
    // dropdown Value
    const selectedOptionValue = event.target.getAttribute('value');
    
    dropdownBtn.textContent = selectedOption;
    // Hide the dropdown list after selection
    dropdownList.classList.remove('show');
  }
});

.row {
     border: 1px solid;
     height:auto;
 }

.col-md-4 .col-sm-8 .col-sm-4{
    border: 1px solid;
    display: block;
}

/* Basic styling for the dropdown container */
.custom-dropdown {
  position: relative;
  display: inline-block;
}

/* Styling for the dropdown button */
.dropdown-btn {
  padding: 10px 20px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

/* Styling for the dropdown list */
.dropdown-list {
  position: relative;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Styling for the dropdown list items */
.dropdown-list li {
  padding: 10px 20px;
  cursor: pointer;
}

/* Show the dropdown list on hover/focus */
.custom-dropdown:hover .dropdown-list,
.custom-dropdown:focus-within .dropdown-list {
  display: block;
}

<div class="container">

    <div class="row">
        <div class="col-12">
          <div class="custom-dropdown" name="cars" id="cars">
          <button class="dropdown-btn">Select Option</button>
          <ul class="dropdown-list">
            <li value="volvo">Volvo</li>
            <li value="saab">Saab</li>
            <li value="opel">Opel</li>
            <li value="audi">Audi</li>
          </ul>
        </div>

        </div> 
    </div>
</div>

您可以访问变量selectedOptionValue中的下拉列表值。