Question

大家好我想尝试使用bootstrap，以便我可以在每个导航菜单之间换行

例如

嗨| Hi1 | H3

我需要它，以便最后的栏也不会在h3之后显示

到目前为止，我已经尝试了这个但它不起作用，它将所有导航功能推到了底部。

HTMKL：

"hello world".capitalize()

CSS：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="logo">
        <img src="Image/Logo.png" class="img-responsive"/>
      </div>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a></li>       
        <li><a href="#about">About</a></li>
        <li><a href="#about">Login</a></li>
        <li><a href="#about">Become A member</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

由于某种原因，它确实创建了行，但它会推翻我的所有文本感谢所有帮助

Answer 1

以下是如何使用伪元素（：after）执行此操作的示例。您不需要当前使用的定位规则（这是您未对齐链接的原因）。使用position: absolute并应用高度。

就上一个li而言，使用:last-child:after删除边框。

请参阅MDN Pseudo-elements

工作示例代码段（带有Active类）

@media (min-width: 768px) {
  .navbar.navbar-default .navbar-nav .active:after {
    content: "";
    border: none;
  }
  .navbar.navbar-default .navbar-nav > li:after {
    content: "";
    border-right: 2px solid #000;
    position: absolute;
    height: 50%;
    right: 0;
    top: 25%;
  }
  .navbar.navbar-default .navbar-nav > li:last-child:after {
    border: none;
  }
}
.navbar.navbar-default .navbar-brand {
  padding-top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand">
        <img src="http://placehold.it/50x50" />
      </a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#about">About</a>
        </li>
        <li><a href="#about">Login</a>
        </li>
        <li><a href="#about">Become A member</a>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>

不带活动的工作示例代码段

@media (min-width: 768px) {
  .navbar.navbar-default .navbar-nav .active:after {
    content: "";
    border: none;
  }
  .navbar.navbar-default .navbar-nav > li:after {
    content: "";
    border-right: 2px solid #000;
    position: absolute;
    height: 50%;
    right: 0;
    top: 25%;
  }
  .navbar.navbar-default .navbar-nav > li:last-child:after {
    border: none;
  }
}
.navbar.navbar-default .navbar-brand {
  padding-top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand">
        <img src="http://placehold.it/50x50" />
      </a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#about">About</a>
        </li>
        <li><a href="#about">Login</a>
        </li>
        <li><a href="#about">Become A member</a>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>

Snippet Mobile示例

.navbar.navbar-default .navbar-nav .active:after {
  content: "";
  border: none;
}
.navbar.navbar-default .navbar-nav > li:after {
  content: "";
  border-right: 2px solid #000;
  position: absolute;
  height: 50%;
  top: 25%;
}
@media (min-width: 768px) {
  .navbar.navbar-default .navbar-nav > li:after {
    right: 0;
  }
  .navbar.navbar-default .navbar-nav > li:last-child:after {
    border: none;
  }
}
.navbar.navbar-default .navbar-brand {
  padding-top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand">
        <img src="http://placehold.it/50x50" />
      </a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#about">About</a>
        </li>
        <li><a href="#about">Login</a>
        </li>
        <li><a href="#about">Become A member</a>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>

Answer 2

这可以通过设置边框来实现。

HTML：

<ul class="navbar-nav mr-auto">
  <li class="nav-item">
    <a href="/about" class="nav-item nav-link">About us</a>
  </li>

  <li class="nav-item">
    <a href="/services" class="nav-item nav-link">Our Services</a>
  </li>

  <li class="nav-item">
    <a href="/solutions" class="nav-item nav-link active is-active">Solutions</a>
  </li>

  <li class="nav-item">
    <a href="/contact" class="nav-item nav-link">Contact</a>
  </li>
</ul>

SCSS

.navbar-nav {
    li.nav-item {
      .is-active {
        color: $blue;
        border-bottom: 2px solid $violet;
      }

      .nav-link {
        margin: 0 8px;
        padding: 0;

      }

      // for nav navbar-expand-lg 
      @include media-breakpoint-up(lg) {
        border-right: 2px dotted $black;
        &:last-child {
          border-right: none;
        }
      }
    }
  }

这将在右侧显示一条边框线，同时隐藏最后一条。

Answer 3

这太愚蠢了，但我可能会帮助其他人。我在导航栏项目链接之后混入了 <br>，我花了很长时间才发现。警惕任何错误的 <br> 标签！

导航栏之间的Bootstrap换行符

3 个答案: