如何设置类似于锚点链接的Navbar按钮的样式？

Question

我的Bootstrap Navbar中有按钮，如下所示：

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><button type="submit" class="">Tab 1</button></li>
        <li><button type="submit" class="">Tab 2</button></li>
        <li><button type="submit" class="">Tab 3</button></li>
    </ul>
</div>

显示：

有没有办法可以设置我的按钮样式来复制Bootstrap Navbar锚标签的默认样式？：

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Answer 1

您可以参考navbar-btn class described in Navbar buttons。

如果您需要从按钮中删除边框，可以添加：

.navbar-nav button {
    border-style: none !important;
}

 <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><button type="submit" class="btn btn-default navbar-btn">Tab 1</button></li>
        <li><button type="submit" class="btn btn-default navbar-btn">Tab 2</button></li>
        <li><button type="submit" class="btn btn-default navbar-btn">Tab 3</button></li>
    </ul>
</div>