image_tagがclass = "center-block"の場合、ブートストラップのドロップダウンメニューのアライメントが失敗する

Question

<ul class="logo"> 
     <li class="navtabs dropdown"> 
      <a class="dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
      <%= image_tag('Thumbnailimagestufffurrreal.jpg', class: "center-block") %> 
      </a> 
      <ul class="dropdown-menu" id="theproblemdropdown" aria-labelledby="dropdownMenu2"> 
      <li class=""><%= link_to "Rails", jobs_path %></li> 
      <li class=""><%= link_to "Scrape", contracts_path %></li> 
      </ul> 
     </li> 
    </ul> 

だから、画像はページの中央に表示されていますが、ドロップダウンは表示されません。 私はほとんどすべてを試しましたが、最終的には完全に失敗します。

ul＃の中心ブロッククラスは、ドロップダウンを常に表示するようにしましたが、それはまだ中央に配置されませんでした。

これまでにいくつかのケースで使用されていたセンターテキストは、ここでは機能していないようです。 私は、相対的な位置を持つエンジニアリング部門を作ろうとした人から回答を読んで、ドロップダウンメニューulを絶対的な位置づけと言っていますが、それは私のために働いていません。

人々が直接的な問題を見ることができるように、ページの参照：http://www.railsjobhub.com/ 私が下のコメントで言ったように、イメージが中央に位置する間、ページ幅全体に広がっているようです。

編集： 以下のRonan Louarnのおかげで、私は回避策を考えました。これは完璧ではありませんが、現在はドロップダウン時に画像と整列しています。問題は、li.dropdownがページの幅を占めていたことでした。そこで私はまずul.logo col-xs-12を作成し、5のオフセットでli col-xs-2を作成しました。liは技術的にはロゴイメージよりも小さく、まったく完璧ではないにしても、

<ul class="logo col-xs-12"> 
     <li class="dropdown col-xs-2 col-xs-offset-5"> 
     <a id="dLabel" data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
      <%= image_tag('ThumbRailsJobHub.jpg', class: "center-block") %> 
     </a> 
     <ul class="dropdown-menu col-xs-12 text-center" aria-labelledby="dLabel"> 
      <li class=""><%= link_to "Jobs", jobs_path %></li> 
      <li class=""><%= link_to "Contracts", contracts_path %></li> 
     </ul> 
     </li> 
    </ul> 

Answer 1

多分あなたは、このメソッドを使用する必要があります。

<div class="dropdown"> 
    <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
    Dropdown trigger 
    <span class="caret"></span> 
    </a> 

    <ul class="dropdown-menu" aria-labelledby="dLabel"> 
    ... 
    </ul> 
</div> 

このブートストラップサイト上でJavaScriptのタブインチ