Question

我有这个菜单，我需要右对齐所有导航项目。我试图玩位置，浮动和右：0，但似乎没有任何效果。

<nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md">
        <div class="container" style="background-color:#ff6a00;padding:22px;position:relative;">
            <div class="navbar-header">
                <button type="button" class="navbar-toggler navbar-toggler-right" style="position:absolute;top:46px" data-toggle="collapse" data-target="#navbarFullCollapse">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <a asp-controller="Home" asp-action="Index" class="navbar-brand"><h1>Artist Name</h1></a>
            </div>
            <div class="navbar-collapse collapse" style="position:relative;right:0px;">
                <div class="navbar-nav">
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="Overviev">Oveview</a>
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="Grafiti">Grafitti</a>
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="Digital">Digital</a>
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="Pencil">Pencil</a>
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="Graphic">Graphics</a>
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="Mase">Mase</a>
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="GrandCentral">Grand Central</a>
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="Painting">Painting</a>
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="Mjau">Mjau</a>
                    <a class="nav-item nav-link" asp-controller="Home" asp-action="Misc">Misc</a>
                </div>
            </div>
        </div>
    </nav>

Answer 1

在导航项的父级上使用justify-content-end助手类。这会将flex子项与flex行中主轴的末端对齐。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md">
  <div class="container" style="background-color:#ff6a00;padding:22px;position:relative;">
    <div class="navbar-header">
      <button type="button" class="navbar-toggler navbar-toggler-right" style="position:absolute;top:46px" data-toggle="collapse" data-target="#navbarFullCollapse">
                    <span class="navbar-toggler-icon"></span>
                </button>
      <a asp-controller="Home" asp-action="Index" class="navbar-brand"><h1>Artist Name</h1></a>
    </div>
    <div class="navbar-collapse collapse justify-content-end" style="position:relative;right:0px;">
      <div class="navbar-nav">
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Overviev">Oveview</a>
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Grafiti">Grafitti</a>
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Digital">Digital</a>
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Pencil">Pencil</a>
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Graphic">Graphics</a>
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Mase">Mase</a>
        <a class="nav-item nav-link" asp-controller="Home" asp-action="GrandCentral">Grand Central</a>
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Painting">Painting</a>
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Mjau">Mjau</a>
        <a class="nav-item nav-link" asp-controller="Home" asp-action="Misc">Misc</a>
      </div>
    </div>
  </div>
</nav>

右对齐菜单导航项

1 个答案: