html - 向Bootstrap 3导航栏添加永久项

Bootstrap 3导航栏提供标题区域和可折叠区域。页眉区域包含一个永久的品牌链接，而可折叠区域包含当窗口缩小时在汉堡图标下折叠的所有其他内容。我试图将一个选择框和一个按钮添加到页眉区域，目的是使它们永久显示，并且在缩小窗口时不会折叠。这是我到目前为止尝试过的（完整的代码可在codepen here中找到）

<div class="navbar-header">
    <-- Hamburger button -->
    <button type="button" class="navbar-toggle" ...>
        ...
    </button>

    <a class="navbar-brand" href="#">Brand</a>

    <!-- Permanent select box -->
    <select class="navbar-text navbar-left">
        <option>Option 1</option>
        <option>Option 2</option>
    </select>

    <!-- Permanent button -->
    <button type="button" class="btn btn-default btn-sm navbar-btn navbar-left">
        Action
    </button>

</div>

不幸的是，我看到两个问题：


标头环绕起来，使选择框和按钮位于品牌链接下方（您必须将窗口的大小从小到大调整才能看到此效果）。
尽管按钮指定为小，但显示为大


任何想法如何解决这些问题？

最佳答案

1）您可以覆盖CSS并将其添加

.navbar-header{
  min-width: 275px;
}

2）如果需要缩小按钮，可以将btn-sm更改为btn-xs。

See demo

关于html - 向Bootstrap 3导航栏添加永久项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25515620/