Nav菜单出现错误,Bootstrap 4 vs 3.3.7

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (103)

我使用附加的CSS和代码,我的高度<li>搞砸了。使用bootstrap 4时它太短了,但它适用于3.3.7。使用4“时有什么问题?

Bootstrap 4有一个很好的方法吗?实现这一目标的最佳方法是什么?

这里还有另一个问题: 自定义bootstrap 4 breadcrumbs箭头效果

没有答案。

我在Bootstrap 3中找到了多个例子,不过是4.我们将不胜感激。

示例1:https//bootsnipp.com/snippets/44am

示例2:版本3.3.7 https://jsfiddle.net/vjstg2zc/1/

版本4 https://jsfiddle.net/cpLd4u5e/

HTML

<ul class="nav nav-pills nav-wizard">
    <li class="active"><a href="#" data-toggle="tab">Home</a></li>
    <li><a href="#" data-toggle="tab">About</a></li>
    <li><a href="#" data-toggle="tab">Contact</a></li>
</ul>

CSS

.nav-pills.nav-wizard > li {
  position: relative;
  overflow: visible;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
.nav-pills.nav-wizard > li + li {
  margin-left: 0;
}
.nav-pills.nav-wizard > li:first-child {
  border-left: 0;
}
.nav-pills.nav-wizard > li:first-child a {
  border-radius: 5px 0 0 5px;
}
.nav-pills.nav-wizard > li:last-child {
  border-right: 0;
}
.nav-pills.nav-wizard > li:last-child a {
  border-radius: 0 5px 5px 0;
}
.nav-pills.nav-wizard > li a {
  border-radius: 0;
  background-color: #eee;
}
.nav-pills.nav-wizard > li:not(:last-child) a:after {
  position: absolute;
  content: "";
  top: 0px;
  right: -20px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 0 20px 20px;
  border-color: transparent transparent transparent #eee;
  z-index: 150;
}
.nav-pills.nav-wizard > li:not(:first-child) a:before {
  position: absolute;
  content: "";
  top: 0px;
  left: -20px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 0 20px 20px;
  border-color: #eee #eee #eee transparent;
  z-index: 150;
}
.nav-pills.nav-wizard > li:hover:not(:last-child) a:after {
  border-color: transparent transparent transparent #aaa;
}
.nav-pills.nav-wizard > li:hover:not(:first-child) a:before {
  border-color: #aaa #aaa #aaa transparent;
}
.nav-pills.nav-wizard > li:hover a {
  background-color: #aaa;
  color: #fff;
}
.nav-pills.nav-wizard > li.active:not(:last-child) a:after {
  border-color: transparent transparent transparent #428bca;
}
.nav-pills.nav-wizard > li.active:not(:first-child) a:before {
  border-color: #428bca #428bca #428bca transparent;
}
.nav-pills.nav-wizard > li.active a {
  background-color: #428bca;
}
提问于
用户回答回答于

bootstrap3bootstrap4,其初级CSS单元旁边已经改变从pxrem,所述的NAV组件已使用被完全重写Flexbox的具有简单的结构。

bootstrap3中,它具有导航的默认样式:

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;

事实上,如果你添加position: relative;display: block;你在bootstrap4样品,它那种工作太:https://jsfiddle.net/davidliang2008/ka83uLq6/4/

.nav-pills.nav-wizard > li a {
    display: block;
    padding: 10px 15px;
    position: relative;
    ...
}

bootstrap4中nav-link为了类似的目的添加了类,您不必使用列表构建导航。你之所以在bootstrap4中看到高度不对,只是因为没有嵌套结构.nav > li > a了。

既然你已经在bootstrap4中询问了最好的方法,那么让我看看我是否可以制作出bootstrap4中的内容

https://jsfiddle.net/davidliang2008/5xod17mw/41/

如果您正在使用SASS / SCSS,那么您可以在风格中清理更多内容,因为您可以为边框颜色等定义变量,并将mixins定义为将右边框设置为正确颜色的功能。

将它放在页面上

因为.nav已经显示为flexbox。您可以通过添加以下.justify-content-center内容轻松集中其项目.nav

<div class="container">
    <nav class="nav nav-pills nav-wizard justify-content-center">
        ...
    </nav>
</div>

https://jsfiddle.net/davidliang2008/5xod17mw/51/

扫码关注云+社区

领取腾讯云代金券