html - 带有易于点击的按钮的 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

这是你想要的？

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>

Answer 2

让你的 div 像这样。宽度：10%；和宽度：80%；

您可以根据需要更改这些百分比。然后用float: left; 安排div。

div 的图像必须居中。背景位置必须居中

我希望它可以帮助。