菜单折叠后如何使导航栏内容居中？ [关闭]答案

【问题标题】：How to center navbar content after menu collapse? [closed]菜单折叠后如何使导航栏内容居中？ [关闭]
【发布时间】：2014-08-14 22:14:31
【问题描述】：

我正在开发一个需要有两个标题的网站。第二个标题包含社交图标（facebook、twitter、linkedin、google plus），在它们旁边我有这个标题：“Fast Social Login>>”。

最初，我使用 css 将它们拉到右侧。我正在使用标题的“折叠”和“导航栏折叠”类，因为我不希望它显示在较小的屏幕上。但是，当此标题折叠时，我希望社交图标位于导航栏的中心。

这可以通过 CSS 调整解决还是我需要编写脚本？

HTML：

<div class="navbar navbar-inverse navbar-static-top header-bottom-border">
    <div class="container">
        <a href="#"><img src="img/googleplus.png" class="social-position pull-right"></a>
        <a href="#"><img src="img/linkedin.png" class="social-position pull-right"></a>
        <a href="#"><img src="img/twitter.png" class="social-position pull-right"></a>
        <a href="#"><img src="img/facebook.png" class="social-position pull-right"></a>
        <div class="collapse navbar-collapse">
            <h2 class=" navbar-text pull-right" style="color: #b0b0b0">FAST SOCIAL LOGIN>></h2>
        </div>
    </div>
</div>

CSS：

.header-bottom-border{
    border-width: 0 0 5px 0;
    border-color: #4c9322;
}
.social-position{
    width: 3em;
    height: 3em;
    display:inline-block;
    margin-left: 10px;
    margin-top: 10px;
    vertical-align: middle;
}

【问题讨论】：

不确定我是否正确理解您的问题，但如果您想要不同分辨率的不同风格，请使用 google 进行媒体查询
你能给我一些你的意思的链接吗？
google.co.uk/…

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您是否尝试过将text-align: center 与媒体查询一起使用？查看navbar-collapse 折叠时的确切宽度，并为该宽度编写查询。

@media (max-width: width-when-navbar-collapses) {
    .container {
        text-align: center;
        a {
            float: none;
        }
    }
}

【讨论】：

我试过了，没有任何反应。图标仍被拉到右侧。这是否意味着“pull-right”类优先于媒体查询？
您还需要在<a> 元素上设置float: none，我忽略了该类。我修改了我原来的帖子。
我已经对您建议的代码进行了一些更改，现在它可以正常工作了。感谢您的帮助。
现在才看到我用SASS风格写的，抱歉，我很忙。很高兴我能帮上忙。干杯:)

【解决方案2】：

试试这个：

@media (max-width: width-when-navbar-collapses) {
    .container a{
        display: block;
        width: 100%;
    }
    .container a img {
        display: table;
        margin: 0 auto;
    }
}

【讨论】：

Davion 的建议非常有效。感谢您的帮助。

【解决方案3】：

是的，这只能通过使用 CSS 来实现，更具体地说，通过使用 media-queries

查看导航栏的Bootstrap-source，他们使用带有特定变量的媒体查询来根据设备宽度更改导航栏的行为：

@media (min-width: @grid-float-breakpoint)

使用移动优先的方法，您需要做的是将社交图标设置为默认居中，并使用此媒体覆盖此设置 - 以最小宽度及以上为目标的查询。

这可以通过以下示例实现：

.navbar .container {
    text-align: center;

    .pull-right {
        // you probably need to override these in here
        float: none;
    }

    @media (min-width: @grid-float-breakpoint){
        text-align: start ;

        .pull-right {
            float: right;
        }
    }
}

如果您没有使用 LESS（或任何其他预处理器）并且您的项目中有引导程序的编译版本，则 @grid-float-breakpoint 的默认值是 768px，定义为 here in the source

【讨论】：

Davion 的建议非常有效。感谢您的帮助。