Question

我正在一个需要有两个标题的网站上工作。第二个标题包含社交图标（facebook，twitter，linkedin，google plus），旁边是我的标题：＆＃34;快速社交登录＆gt;＆gt;＆＃34; 。

最初，有了css，我将它们拉向右边。我正在使用＆＃39; collapse＆＃39;和＆＃39; navbar-collapse＆＃39;标题的类，因为我不希望它在较小的屏幕上显示。但是，当此标题崩溃时，我希望社交图标以导航栏为中心。

可以通过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;
}

Answer 1

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

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

Answer 2

是的，只有使用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（或任何其他预处理器），并且您的项目中已经编译了bootstrap版本，则@grid-float-breakpoint的默认值为768px，如定义{{ 3}}

Answer 3

试试这个：

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

菜单崩溃后如何使导航栏内容居中？

3 个答案: