Выравнивание выпадающего меню в выпадающем меню

Question

Я не очень разбираюсь в веб-разработке и сталкиваюсь с проблемой, создающей список выпадающих меню и заголовок поверх каждого из них. я получаю это:

И я пытаюсь получить что-то вроде этого:

Это код, который я написал.

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

<div class="row" align="center" id="filtros"> 
 
       <div class="col-md-3">1. Cerca de tí 
 
        <div class="dropdown"> 
 
         <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
          Todas las delegaciones 
 
          <span class="caret"></span> 
 
         </button> 
 
         <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
          <li><a href="#">Action</a> 
 
          </li> 
 
         </ul> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-3">2. ITS 
 
        <div class="dropdown"> 
 
         <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
          Todas las delegaciones 
 
          <span class="caret"></span> 
 
         </button> 
 
         <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
          <li><a href="#">Action</a> 
 
          </li> 
 
         </ul> 
 
        </div>

Любая помощь будет принята с благодарностью.

Answer 1

Сделать DIV в качестве дисплея: встроенный блок с помощью этого можно достичь без ожидаемого разметки

проверить этот фрагмент

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 
.col-md-3 { 
 
    display: inline-block; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
}

<div class="row" align="center" id="filtros"> 
 
    <div class="col-md-3">1. Cerca de tí 
 
    <div class="dropdown"> 
 
     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
     Todas las delegaciones 
 
     <span class="caret"></span> 
 
     </button> 
 
     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
     <li><a href="#">Action</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-3">2. ITS 
 
    <div class="dropdown"> 
 
     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
     Todas las delegaciones 
 
     <span class="caret"></span> 
 
     </button> 
 
     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
     <li><a href="#">Action</a> 
 
     </li> 
 
     </ul> 
 
    </div>

Надеется, что это помогает