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

Question

我有一个带有两个按钮的导航栏，这个按钮应该总是可见的。所以我不能使用导航栏折叠类。对于实际样式，只有按钮区域的部分是可点击的。

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

<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重叠的按钮。

看到这个小提琴

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;
}

*注意我删除了将导航栏固定到顶部的类仅用于小提琴（将它重新添加应该没问题），因为小提琴窗口有一个与按钮重叠的“结果”标签，这会让它看起来好像按钮仍然不起作用。