Question

我想将我的链接集中在导航栏的移动视图（md和down视图）上，但我似乎无法找到解决方案。 我正在使用bootstrap v4-alpha

  <div class="container-fluid p-b-3">

    <nav class="navbar navbar-full  navbar-fixed-top navbar-light bg-faded">


        <ul class="nav navbar-nav">

            <li>
                <a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" data-toggle="modal" data-target="#myModal" style="cursor:pointer;">LINK 3</a>
            </li>
            <li>
                <a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" href="#kontakti">LINK 2</a>
            </li>
            <li>
                <a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" href="#produktet">LINK 1</a>
            </li>
        </ul>

    </nav>


</div>

Here's the codepen link

Answer 1

您可以使用flexbox实现它。

这是我创建的工作笔：http://codepen.io/anon/pen/bwbpNx

CSS

.navbar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

我认为这是正确的方法之一。所以，如果你添加另一个链接。它将保持在中心位置。希望能帮助到你。干杯！

Answer 2

使用媒体查询和覆盖样式使链接居中对齐。

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css');

@media (max-width: 767px) {
  .navbar ul {
    text-align: center;
  }
  .navbar ul li {
    display: inline-block;
    vertical-align: top;
    padding: 0 10px;
  }
  .navbar ul li a {
    margin-left: 0 !important;
  }
}

＆＃13;

<div class="container-fluid p-b-3">
  <nav class="navbar navbar-full  navbar-fixed-top navbar-light bg-faded">
    <ul class="nav navbar-nav">
      <li>
        <a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" data-toggle="modal" data-target="#myModal" style="cursor:pointer;">LINK 3</a>
      </li>
      <li>
        <a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" href="#kontakti">LINK 2</a>
      </li>
      <li>
        <a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" href="#produktet">LINK 1</a>
      </li>
    </ul>
  </nav>
</div>

＆＃13;

在引导程序中居中导航栏链接

2 个答案: