Twitter引導頂部導航欄，帶有易於單擊的按鈕

Question

我有一個固定的頂部導航欄。 一切都適合台式機。 但是很難單擊手機中的鏈接和按鈕。

用戶無法單擊綠色區域：

是否有可能或易於實現的導航欄堆棧和切換按鈕易於單擊。 例如，用戶可以單擊三個部分中的每個部分，如下所示：

我的代碼和小提琴如下： http : //jsfiddle.net/mavent/RaArC/11/

<nav class="navbar navbar-inverse navbar-fixed-top visible-xs" role="navigation">
    <div class="navbar-header" style="text-align:center;">
        <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-part2"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
        </button>
        <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-part3" style="padding: 3px 15px;">
            <img src="http://www.wdc.com/Global/images/icons/icon_supporthelp.gif" width="24" height="24" alt="aaaa">
        </button>
        <div style="padding-top: 15px;"> <a href="/page0" title="aaa" style="color:#ffffff;margin-top:40px;">Example.com</a>
        </div>
    </div>

    <div class="collapse navbar-collapse navbar-part2">
        <ul class="nav navbar-nav">
            <li><a href="/page1">page 1</a></li>
            <li><a href="/page2">page 2</a></li>
        </ul>
    </div>
    <div class="collapse navbar-collapse navbar-part3">
        <ul class="nav navbar-nav">
            <li><a href="/page3">page 3</a></li>
            <li><a href="/page4">page 4</a></li>
        </ul>
    </div>
</nav>

（類似的問題沒有答案在這里 ）

Answer 1

使您的div這樣。 寬度：10％; 寬度：80％；

您可以根據需要更改這些百分比。 然后用float：left; 安排股利。

div的圖像必須居中。 背景位置必須居中

希望對您有所幫助。

Answer 2

這是你想要的？

http://jsfiddle.net/RaArC/14/

我將您的“ Example.com”鏈接的樣式更改為“ display：block”，並刪除了周圍的<div> （這只是提供了一些我並入鏈接塊本身的填充）。

<a href="/page0" title="aaa" style="color:#fff;padding:15px 0px;display:block;">Example.com</a>