Question

我试图让我的导航链接以我的导航栏为中心。我到目前为止：

@media (min-width: 768px){
.navbar-nav{
    float:none;
    margin: 0 auto;
    display: table;
    table-layout: fixed;
 }
}

这在链接现在居中的意义上很有效。但是，它们并不以页面为中心 - 它们以品牌形象使用的100px为中心。

有谁知道如何将它们置于页面中心或放入100px偏移量？

以下an example证明了这个问题。

Answer 1

有几种不同的方法可以做到这一点。以下是4种不同的方法：

绝对定位.header，从而将其从流中删除。换句话说，.navbar将不再考虑它。

Example Here

@media (min-width: 768px) {
    .navbar-header {
        position: absolute;
    }
    .navbar {
        text-align: center;
    }
    .navbar-nav {
        float: none;
        display: inline-block;
        vertical-align: top;
    }
}

绝对定位#navbar（将其从流程中取出），并使用text-align: center将现在为inline-block的子元素居中。

Example Here

@media (min-width: 768px) {
    #navbar {
        position: absolute;
        left: 0; right: 0;
        text-align: center;
    }
    .navbar-nav {
        float: none;
        display: inline-block;
    }
}

与之前的方法类似，只是一种不同的居中形式。

Example Here

@media (min-width: 768px) {
    #navbar {
        position: absolute;
        left: 0; right: 0;
    }
    .navbar-nav {
        float: none;
        margin: 0 auto;
        display: table;
        table-layout: fixed;
    }
}

这是一种集中元素的有趣方法。

Example Here

@media (min-width: 768px) {
    .navbar-nav {
        transform: translateX(-50%);
        left: 50%;
        position: absolute;
    }
}

Bootstrap 3：导航栏上的中心导航链接忽略品牌形象

1 个答案: