Javascript 菜单折叠后如何居中导航栏内容？

我在一个网站上工作，需要有两个标题。第二个标题包含社交图标（facebook、twitter、linkedin、google plus），在它们旁边我有一个标题：“快速社交登录>>”

最初，使用css，我将它们向右拉。我使用“collapse”和“navbar collapse”类作为标题，因为我不希望它显示在较小的屏幕上。但是，当这个标题折叠时，我希望社交图标集中在导航栏上

这可以通过CSS调整来解决吗？或者我需要编写脚本吗

HTML:

---

您是否尝试过将

text align:center

与媒体查询一起使用？ 查看

导航栏折叠时的确切宽度，并为该宽度编写查询

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

是的，这是可能的，只使用CSS，更具体地说，使用

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

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

如果您没有使用更少的（或任何其他预处理器），并且您的项目中有编译版本的引导程序，
@grid float breakpoint
的默认值是
768px
，如定义所示
尝试以下操作：

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

不确定我是否理解你的问题，但如果你想要不同的风格，不同的决议有一个媒体查询谷歌你能给我一些链接，你的意思请？我尝试了这个，但没有发生任何事情。图标仍然向右拉。这是否意味着“向右拉”类的优先级高于媒体查询？您需要在
元素上设置
float:none
，我也忽略了该类。我修改了我原来的帖子。我对你建议的代码做了一些修改，现在它运行得很好。我很感谢你的帮助。刚刚看到我用SASS风格写的，很抱歉，我很忙。很高兴我能帮上忙。干杯：）戴维恩的建议非常有效。谢谢你的帮助。戴维恩的建议非常有效。我感谢你的帮助。
.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;
        }
    }
}

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