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>

不幸的是，我发现了两个问题：

标题包装使选择框和按钮位于品牌链接下方（您必须将窗口从小调整为大调才能看到此效果）。
虽然按钮指定为小，但显示为大

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

Answer 1

1）您可以覆盖CSS并添加此

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

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

<强> See demo

将永久物品添加到Bootstrap 3导航栏

1 个答案: