水平ナビタブのドロップダウン

Question

私は、ドロップダウンを水平（および列の幅の100％）にすることにいくつか問題がありました。私はたくさんのコードを試してきましたが、もちろん多くのものを調整しましたが、まだこれを行うことができませんでした。

次の覚えておいてください：

• をブートストラップV3.3.7
• を使用して、それが唯一の100％でなければなりません
• （ではない通常のナビゲーションバー）のnav-タブを使用してください列の幅

誰かが私を助けてくれることを願っています。

よろしく、 Siranix

EDIT：要求されたとして、ここbootply /私のコードてみます：Bootply

Answer 1

私はあなたがposition: static;を削除する必要があると思うが、私に知らせてくださいあなたが何をしたいということです。

.nav > li.dropdown.open { 
 
} 
 
.nav > li.dropdown.open .dropdown-menu { 
 
    display:table; 
 
    width: 100%; 
 
    text-align: center; 
 
    left:0; 
 
    right:0; 
 
} 
 
.dropdown-menu>li { 
 
    display: table-cell; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<ul class="nav nav-tabs"> 
 
    <li class="active"><a href="#tab-1" role="tab" data-toggle="tab">General </a></li> 
 
    <li class="dropdown"><a data-toggle="dropdown" aria-expanded="true" href="#" class="dropdown-toggle"><i class="fa fa-users"></i> Example Dropdown<span class="caret"></span></a> 
 
     <ul role="menu" class="dropdown-menu suf-ver-tabdropdown"> 
 
      <li role="presentation"><a href="#">First Item</a></li> 
 
      <li role="presentation"><a href="#">Second Item</a></li> 
 
      <li role="presentation"><a href="#">Third Item</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#tab-2" role="tab" data-toggle="tab">Second Tab</a></li> 
 
    <li><a href="#tab-3" role="tab" data-toggle="tab">Third Tab</a></li> 
 
</ul>