ドロップダウンメニューのタイトルをドロップダウンメニューに合わせる

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>

希望を達成することができます