Bootstrap-創建不使用折疊的移動導航

Question

在看了很多教程之后，我無法在Bootstrap中找到滿足我需求的解決方案。

情況...我有兩個導航欄，一個用於平板電腦和手機，另一個用於大型設備。 我之所以不使用折疊響應功能，是因為較大的導航欄不能真正用於較小的設備。

我遇到的問題是，我似乎無法使用按鈕制作選項卡式移動菜單。 我知道如何使用可折疊的導航欄來執行此操作，但不能使用永久是移動菜單的導航欄來做到這一點。

這是我正在使用的html：

<div class="navbar navbar-default nav-links navbar-fixed-top hidden-md hidden-lg">
    <div class="container">
        <button class="visible-sm visible-xs navbar-toggle"
                data-target="#i-want-this-to-collapse" 
                data-toggle="collapse" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
        </button>
        <a class="mini-navbar navbar-brand" href="/">
            <img src="media/img/nav-logo.png" alt="Driven Car Sales Logo"
                 class="img-rounded logo-nav mini-navbar" />
        </a>
        <ul class="nav navbar-nav">
            <li><a href="#">Used Cars</a></li>
            <li><a href="#">Get Finance</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle"
                   data-toggle="dropdown">
                    About Driven<strong class="caret"></strong>
                </a>
                <ul class="dropdown-menu">
                    <li> <a href "#">The Team</a></li>
                    <li> <a href "#">Our Partners</a></li>
                </ul>
    </div>
</div>

如您所見，它不會產生選項卡式效果，我可以做什么來達到目的？

Answer 1

默認情況下，在小屏幕上，導航欄菜單項將占據屏幕寬度的100％，並相互堆疊。 由於該堆棧占用大量空間，因此引導程序建議您添加一個切換按鈕以在不使用時隱藏菜單項。

如果要像“標簽”那樣對它們進行樣式設置，而不是使用全角樣式，則必須確保它們可以彼此並排放置。 在大多數設計案例中，這並非微不足道。

要將導航欄項（如選項卡）設置為任意寬度，只需應用以下CSS：

.navbar-nav {
    margin: 0;
}
.navbar-nav > li {
    float: none;
    display: inline-block;
}
.navbar-nav > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
}

這是小提琴中的演示

---

此外，作為構建兩個單獨的導航欄的替代方法，您可以嘗試根據可用的資源動態顯示內容。

例如，如果您在每個菜單項中都添加了圖標，則在較小的屏幕尺寸下，只需在懸停時顯示一個圖標和一個工具提示，您就可以擺脫困境。

這是一個例子：

<li class="active">
  <a href="#" >
    <i class="fa fa-car" title="Used Cars"
       data-toggle="tooltip" data-placement="bottom" ></i>
    <span class="hidden-xs">Used Cars</span>
  </a>
</li>

這是擺弄這種方法的小提琴