html - 将永久元素添加到 Bootstrap 3 导航栏

Question

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. 标题换行，使选择框和按钮位于品牌链接下方(您必须将窗口从小调整到大才能看到此效果)。
2. 虽然按钮被指定为小，但它显示为大

知道如何解决这些问题吗？

Answer 1

1) 您可以覆盖 CSS 并添加它

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

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

See demo