Question

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

NavBar1

这是一个断点，无序列表项（li）会垂直堆叠而不是水平堆叠：

NavBar2

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

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

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

Bootstrap版本是3.3.2。

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

Answer 1

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

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

正如@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;
}

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

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

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

<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;
}

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

最后，我想隐藏我放在页脚中的电话号码。为此，我在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;

.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 用户，在这些用户中我遇到了非常相似的问题：

在导航栏声明的顶部，将导航栏扩展navbar-expand类添加到<nav>元素中。

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%;

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

4 个答案: