Question

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

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

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

*注意我删除了将导航栏修复到顶部仅用于小提琴的类（它应该没有添加回来），因为小提琴窗口有一个＆＃39;结果＆＃39;与按钮重叠的标记，这看起来好像按钮仍然不起作用。

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

1 个答案: