在Bootstrap 4中将一些nav-pills元素对齐到右边

时间:2017-12-16 19:22:22

标签: twitter-bootstrap bootstrap-4 nav twitter-bootstrap-4 nav-pills

我正在使用Bootstrap 4-beta2' ml-auto来实现选项卡式界面。

如何将某些元素对齐到屏幕右侧?

在最后li项目上设置ul不起作用。拆分两个ul中的tabright不起作用,因为它允许tableft1<nav class="fixed-top bg-dark"> <div class="navbar"> <a class="navbar-brand" href="#tabmain">Brand</a> <ul class="nav nav-pills mr-auto"> <li class="nav-pill active"><a class="nav-link" href="#tableft1" data-toggle="pill">TabLeft1</a></li> <li class="nav-pill"><a class="nav-link" href="#tableft2" data-toggle="pill">TabLeft2</a></li> <li class="nav-pill"><a class="nav-link" href="#tabright" data-toggle="pill">TabRight</a></li> </ul> </div> </nav> 同时处于活动状态。< / p>

  const char* cp;
  char p = 'U';
  cp = &p;

1 个答案:

答案 0 :(得分:0)

原来navbar是flex,因此特定于flex的类正在帮助:

<nav class="fixed-top bg-dark">
    <div class="navbar justify-content-start flex-nowrap">
        <a class="navbar-brand" href="#tabmain">Brand</a>
        <ul class="nav nav-pills w-100">
            <li class="nav-pill active"><a class="nav-link" href="#tableft1" data-toggle="pill">TabLeft1</a></li>
            <li class="nav-pill"><a class="nav-link" href="#tableft2" data-toggle="pill">TabLeft2</a></li>
            <li class="nav-pill ml-auto"><a class="nav-link" href="#tabright" data-toggle="pill">TabRight</a></li>
        </ul>
    </div>
</nav>