只有部分按钮区域是可点击的

Question

我有一个带两个按钮的导航栏，这个按钮应该始终可见。所以我无法使用 navbar-collapse class。使用实际样式，只有部分按钮区域是可点击的。

如何获得具有更好按钮行为的相同设计（按钮的整个区域应该是可点击的）？

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <button onclick="alert('Left')" type="button" class="btn btn-default navbar-btn pull-left"> <span class="glyphicon glyphicon-menu-left"></span>

        </button>
        <p class="navbar-text navbar-text-extension" href="#">Date</p>
        <button onclick="alert('Right')" type="button" class="btn btn-default navbar-btn pull-right"> <span class="glyphicon glyphicon-menu-right"></span>

        </button>
    </div>
</nav>

http://jsfiddle.net/mkeuschn/6jeyc7tk/

Answer 1

是 navbar-text-extension 重叠按钮。

见this fiddle

HTML

<nav class="navbar navbar-inverse ">
    <div class="container-fluid">
        <div class="text-center">
            <button onclick="alert('Left')" type="button" class="btn btn-default navbar-btn pull-left">
                <span class="glyphicon glyphicon-menu-left"></span>
            </button>
            <span class="navbar-text display-ib" href="#">Date</span>
            <button onclick="alert('Right')" type="button" class="btn btn-default navbar-btn pull-right">
                <span class="glyphicon glyphicon-menu-right"></span>
            </button>
        </div>
    </div>
</nav>

CSS:

.navbar-text.display-ib{
    display:inline-block;
    float:none !important;
}

*注意我删除了 class ，它只为 fiddle 将导航栏固定在顶部（将它添加回去应该没问题)，因为 fiddle window 有一个 'result' 标签与按钮重叠，这会使按钮看起来好像仍然不起作用。

只有部分按钮区域是可点击的

Only part of the Button Area is clickable

twitter-bootstrap

twitter-bootstrap-3