在引导导航栏中停止列表项堆叠

Question

我在 Twitter Bootstrap 中创建了一个底部导航栏（页脚）来包含一些社交媒体链接：

有一个断点，无序列表项 (li) 垂直而不是水平堆叠：

我可以看到这种行为对于使用带有标题的导航栏是可取的（我在顶部导航栏上使用它），但由于我只是将这个底部用于图标，我不希望它们垂直堆叠为有足够的宽度让它们水平排列到移动屏幕。

如何仅在底部导航栏上禁用此行为？

我还想知道当设备的宽度小于电话号码和社交媒体图标的宽度时，我在左侧导航项中的电话号码和图标是否会消失。

引导版本是 3.3.2。

更新：这是一个小提琴http://jsfiddle.net/0jqssmmb/

Answer 1

所以我需要解决 3 个问题：

1. 当窗口宽度低于特定大小时，水平显示社交媒体图标而不是垂直堆叠。

正如@fructurj 指出的，这可以通过将display: inline-block 添加到css 中的navbar-nav>li 选择器来解决。但是，这会影响所有导航栏；我只希望我的页脚导航栏以这种方式运行。为此，只需在页脚 html 中添加与 navbar-nav 相同的 ul 级别的自定义类：

<ul class="nav navbar-nav navbar-right navbar-custom">
    <li>
        <a href="https://twitter.com/maneevent6" target="_blank" title="@manevent6"><img src="\img\icons\twitter\Twitter_logo_blue.png" class="tw-logo"></a>
    </li>
    ...
</ul>

然后将display: inline-block 应用于您的css媒体查询中的那个选择器：

.navbar-nav>li {             /* <- this affects all navbars */
    float: none;
    text-align: center;
}
.navbar-custom>li {          /* <- this affects just my footer navbar */
    display: inline-block;
}

这将导致社交媒体图标水平对齐而不是垂直堆叠，这就是我所追求的。不幸的是，图标会左对齐，这将我们带到第二期......

1. 重新对齐页脚导航栏中的社交媒体图标

一旦应用内联块，社交媒体图标就会失去水平对齐。为了设置新的水平对齐方式，我用我自己的自定义类“img-inline”将我的社交媒体图标包含在一个新的div 中包围了ul：

<div class="img-inline">
    <ul class="nav navbar-nav navbar-right navbar-custom">
        <li>
            <a href="https://twitter.com/maneevent6" target="_blank" title="@manevent6"><img src="\img\icons\twitter\Twitter_logo_blue.png" class="tw-logo"></a>
        </li>
        ...
    </ul>
</div>

然后在我的 css 媒体查询中选择它并应用 text-align: center;，因为这是我在此屏幕宽度下的首选对齐方式：

.img-inline {
    text-align: center;
}

1. 当窗口宽度低于一定大小时，隐藏页脚中的电话号码。

最后，我想隐藏我放在页脚的电话号码。为此，我向包含电话号码的ul 添加了一个自定义类“navbar-hide”：

<ul class="nav navbar-nav navbar-left navbar-hide">
    <li>
        <p id="Telephone"><i class="fa fa-phone fa-lg"></i> 01999 999999</p>
    </li> 
</ul>

然后通过应用 display: none !important; 在我的 css 媒体查询中选择它：

.navbar-hide {
    display: none !important;
}

这是更新代码的小提琴（原始问题）：http://jsfiddle.net/0jqssmmb/3/

Answer 2

您可以在媒体查询的列表项中添加display:inline-block：

 .navbar-nav>li {
        float: none;
        text-align: center;
        display: inline-block;
    }

Answer 3

以下内容可能对 Bootstrap 4 用户有所帮助，我遇到了非常相似的问题：

在导航栏声明最顶部的 <nav> 元素中添加一个 navbar-expand navbar-expand 类。

来自docs的示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">

文档也明确说明了这一点：

导航栏需要一个带有 .navbar-expand{-sm|-md|-lg|-xl} 的包装 .navbar 用于响应式折叠和配色方案类。

Answer 4

我发现，当我应用display: inline-block; 列表内容时，会出现问题。所以如果你想让你的列表看起来不错，你需要这样做

.navbar-nav>li {
        display: inline-block;
        width: how many contents you have %;
    }

如果你有 3 个，那么width:33%;