时间戳

首页 > 解决方案 > 每个引导导航栏链接可以单独间隔吗

css - 每个引导导航栏链接可以单独间隔吗

问题描述

例如，我有一个带有以下链接的导航栏： 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">Register <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Login</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Business Owner's Learn More</a>
  </li>
  <li id="login" class="nav-item ">
    <a class="nav-link" href="#">Login</a>
  </li>
</ul>

所有这些当前都与左侧对齐，但我想将#login链接放在右侧，这可以通过引导程序实现吗？我是否应该使用其他东西，例如弹性盒、网格等...？

标签： csstwitter-bootstrapflexboxgridalignment

解决方案

d-flex在 ul 和align-self-end要向右对齐的 li 上添加类。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<ul class="navbar-nav mr-auto d-flex">
  <li class="nav-item active">
    <a class="nav-link" href="#">Register <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Login</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Business Owner's Learn More</a>
  </li>
  <li id="login" class="nav-item align-self-end">
    <a class="nav-link" href="#">Login</a>
  </li>
</ul>

或 将text-right类添加到所需的 li 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">Register <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Login</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Business Owner's Learn More</a>
  </li>
  <li id="login" class="nav-item text-right">
    <a class="nav-link" href="#">Login</a>
  </li>
</ul>

推荐阅读