水平Nav選項卡Dropdown

-1

我一直有一些問題，讓下拉是水平的（和100％寬度的列）。我嘗試了很多代碼，當然也調整了很多東西，但還沒有完成。水平Nav選項卡Dropdown

請保持在以下幾點：

使用引導V3.3.7
確保使用導航的選項卡（不正常的導航欄）
只應爲100％列的寬度

我希望有人能夠幫助我與此。

問候， Siranix

編輯：按照要求，這裏有一個bootply嘗試/我的代碼：Bootply

來源

2017-06-12 Siranix

[堆棧溢出（https://stackoverflow.com/）不是一個自由碼寫入服務。您應該嘗試自己編寫代碼。如果你遇到問題，在做了更多的研究之後，你可以發佈你已經試過的東西，並清楚說明什麼是不工作的，並提供[最小，完整和可驗證]（http://stackoverflow.com/help/mcve）例。我建議你閱讀[如何提出一個好問題]（http://stackoverflow.com/help/how-to-ask）。 – codesayan

@imSayan當然，我自己也嘗試過這個，我也在我的帖子中說過。我編輯了這篇文章，並在我嘗試的版本中加入了一個bootply（小提琴）例子。 – Siranix

現在很好。請檢查我的答案。並讓我知道它是否正確。 – codesayan

我認爲你需要刪除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>

來源

2017-06-13 04:47:23 codesayan

水平Nav選項卡Dropdown

回答

相關問題