在引导4导航栏中心的元素在引导4导航栏中心的元素(Center an element in Boot

2019-05-11 01:07发布

站内文章 / 前端开发
48 0 0

不管我怎么努力，我不能在中心导航栏自举的东西，它的任何解决方案？

我已经尝试添加一个div，使用margin:0 auto; 或margin-right:auto; margin-left:auto; margin-right:auto; margin-left:auto; ，使用center-block的类。 实在不行，为什么这么难实现这么简单的东西我不明白，我在做什么错？

下面是当前的代码： 

<nav class="navbar navbar-fixed-top navbar-dark main-nav">
<div class="container">
    <ul class="nav navbar-nav pull-left">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Download</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>

    <ul class="nav navbar-nav text-center">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav pull-right">
        <li class="nav-item">
            <a class="nav-link" href="#">Rates</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</div>

Answer 1:

在引导4，有被称为新的电线.mx-auto 。 你只需要指定为中心元素的宽度。

参考： http://v4-alpha.getbootstrap.com/utilities/spacing/#horizo​​ntal-centering

从低音Jobsen的答案，这是一个相对的中心到两端的元件不同影响，下面的例子是绝对的居中。

这里的HTML： 

<nav class="navbar bg-faded">
  <div class="container">
    <ul class="nav navbar-nav pull-sm-left">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-logo mx-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Brand</a>
      </li>
    </ul>
    <ul class="nav navbar-nav pull-sm-right">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 6</a>
      </li>
    </ul>
  </div>
</nav>

和CSS： 

.navbar-logo {
  width: 90px;
}


Answer 2:

更新了引导4.1+

引导4导航栏现在使用Flexbox的，因此Website Name可以使用中心mx-auto 。 左侧和右侧菜单不需要浮动。 

<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Download</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
        </ul>
        <ul class="nav navbar-nav mx-auto">
            <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Rates</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Help</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

导航栏中心与mx-auto演示

如果导航栏只有一个navbar-nav ，则justify-content-center也可用于中心。

编辑

在上述方案中，该Website Name 相对于左和右心navbar-nav因此，如果这些相邻的NAV的宽度是不同的Website Name不再居中。

为了解决这个问题，那么Flexbox解决方法绝对中心的一个可用于...

选项1 -使用的位置是：绝对的;

由于它的确定在Flexbox的使用绝对定位，一种选择是使用的项目为中心。 

.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

导航栏中心与绝对位置演示

选项2 -使用Flexbox的嵌套

最后，另一种选择是使中心的项目也display:flexbox和中心对齐。 在这种情况下，每个导航栏组件必须具有flex-grow:1

自举4测试版，该导航栏现在display:flex 。 自举4.1.0包括一个新的flex-fill类使每个NAV部填充宽度： 

<nav class="navbar navbar-expand-sm navbar-dark bg-dark main-nav">
    <div class="container justify-content-center">
        <ul class="nav navbar-nav flex-fill w-100 flex-nowrap">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Download</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">More</a>
            </li>
        </ul>
        <ul class="nav navbar-nav flex-fill justify-content-center">
            <li class="nav-item"><a class="nav-link" href="#">Center</a></li>
        </ul>
        <ul class="nav navbar-nav flex-fill w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Help</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

导航栏中心，Flexbox的嵌套演示

此前自举4.1.0，您可以添加柔性填充类这样的... 

.flex-fill {
   flex:1
}

由于4.1 flex-fill包括在引导。

自举4个导航栏中心演示

有关：
如何中心在引导导航项？
引导的NavBar与左，或右对齐项目
如何在我的导航栏导航栏下的品牌移动导航元素



Answer 3:

试试这个。 

.nav-tabs > li{
    float:none !important;
    display:inline-block !important;
}

.nav-tabs {
    text-align:center !important;
}


Answer 4:

请参阅： https://stackoverflow.com/a/14146967/1596547 ，现在你可以使用： 

<nav class="navbar navbar-light main-nav">
<div class="container text-xs-center">
    <ul class="nav navbar-nav pull-xs-left">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Download</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>

    <ul class="nav navbar-nav" style="display: inline-block;">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item">
            <a class="nav-link" href="#">Rates</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</div>
</nav>

申请text-xs-center的容器，并设置display: inline-block; 为您的列表。



Answer 5:

我有一个类似的问题; 在我Bootstrap4导航栏锚文本不居中。 只需添加text-center在锚的类。



Answer 6:

使新风格

.container {
    position: relative;
}
.center-nav {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: auto;
    max-width: 200px;
    text-align: center;
}
.center-nav li{
  text-align: center;
  width:100%;
}

下面更换网站名称UL 

<ul class="nav navbar-nav center-nav">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
 </ul>

希望这可以帮助..



Answer 7:

从文档

导航栏可以包含文本的位与.navbar文本的帮助。 此类调整用于文本字符串垂直取向和水平间距。

我所施加的.navbar文本类到我的<li>元素，故其结果是

<li class="nav-item navbar-text">

这种垂直居中的链接相对于我的导航栏，品牌IMG



Answer 8:

使用MX-自动将做的工作

<ul class="navbar-nav mx-auto">


文章来源: Center an element in Bootstrap 4 Navbar
标签： css twitter-bootstrap bootstrap-4 navbar
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~