- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我想在 div 的宽度上调整我的导航栏。问题是我使用 Bootstrap v4
并且 nav-justify 类尚不可用。
代码如下:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#subscribed" data-toggle="tab">Mes inscriptions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#eventPassed" data-toggle="tab">Événements passés</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#eventNow" data-toggle="tab">Événements en cours</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#eventIncoming" data-toggle="tab">Événements futurs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#eventCreation" data-toggle="tab">Créer un événement</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#eventOwn" data-toggle="tab">Mes événements</a>
</li>
</ul>
我不想在 CSS 中使用百分比来做到这一点;我想要响应式的东西。
最佳答案
确实缺少nav-justify 类
。暂时可以根据TB3的代码自行添加:
SCSS代码:
// Justified nav links
// -------------------------
@mixin nav-justified {
width: 100%;
.nav-item {
float: none;
}
.nav-link {
text-align: center;
margin-bottom: 5px;
}
> .dropdown .dropdown-menu { //todo: remove child selector
top: auto;
left: auto;
}
@include media-breakpoint-up(sm) {
.nav-item {
display: table-cell;
width: 1%;
}
.nav-link {
margin-bottom: 0;
}
}
}
// Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
@mixin nav-tabs-justified {
border-bottom: 0;
.nav-link {
// Override margin from .nav-tabs
margin-right: 0;
border-radius: $border-radius;
}
.nav-link.active,
.nav-link.active:hover,
.nav-link.active:focus {
border: 1px solid $nav-tabs-justified-link-border-color;
}
@include media-breakpoint-up(sm) {
.nav-link {
border-bottom: 1px solid $nav-tabs-justified-link-border-color;
border-radius: $border-radius $border-radius 0 0;
}
.nav-link.active,
.nav-link.active:hover,
.nav-link.active:focus {
border-bottom-color: $nav-tabs-justified-active-link-border-color;
}
}
}
.nav-justified {
@include nav-justified;
@include nav-tabs-justified;
}
编译后的 CSS 代码:
.nav-justified {
width: 100%;
border-bottom: 0; }
.nav-justified .nav-item {
float: none; }
.nav-justified .nav-link {
text-align: center;
margin-bottom: 5px; }
.nav-justified > .dropdown .dropdown-menu {
top: auto;
left: auto; }
@media (min-width: 544px) {
.nav-justified .nav-item {
display: table-cell;
width: 1%; }
.nav-justified .nav-link {
margin-bottom: 0; } }
.nav-justified .nav-link {
margin-right: 0;
border-radius: 0.25rem; }
.nav-justified .nav-link.active,
.nav-justified .nav-link.active:hover,
.nav-justified .nav-link.active:focus {
border: 1px solid #ddd; }
@media (min-width: 544px) {
.nav-justified .nav-link {
border-bottom: 1px solid #ddd;
border-radius: 0.25rem 0.25rem 0 0; }
.nav-justified .nav-link.active,
.nav-justified .nav-link.active:hover,
.nav-justified .nav-link.active:focus {
border-bottom-color: #fff; } }
HTML
<div class="container">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
更新:从 BS4 alpha 6 开始,nav-justified
和新类 nav-fill
一起回来了 http://v4-alpha.getbootstrap.com/components/navs/#fill-and-justify
关于html - 使用 Bootstrap v4 验证 Nav-pills,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34411884/
我正在使用 Bootstrap pill 在同一页面上进行切换。有两个导航丸和两个分别对应的 div。我已经正确构建了第一个 div,并且工作正常。但是当我试图构建第二个 div 时,第一个 div
这个问题在这里已经有了答案: Nested tabs in bootstrap (3 个答案) 关闭 3 年前。
所以我有一些垂直的药丸,它们有一个 :after class 在药丸的末端创建一个三 Angular 形: .nav-link.active :after { position: absolu
我想用下拉菜单创建 Angular 药丸。我已经做到了这一点,但问题是只有 span 或 a 是可点击的,而不是药丸的其余部分。但是,如果我单击药丸,它仍会突出显示药丸,但不会执行单击它时必须执行的任
我想在我的网站上使用导航丸,但它们会导致后台泄漏。在本站看效果:http://oleb.net/blog/2011/12/tutorial-how-to-sort-and-group-uitablev
我可以折叠默认导航栏的链接,但我不想使用默认导航栏。我想要 nav pills,对于较小的屏幕,pills 下的链接应该折叠起来。对于较小的屏幕,我的 nav pills 数据不会折叠。这是我的代码:
与药丸内容相比,侧边栏有些不对劲。这段代码的结果基本上是 被推到药丸标签旁边的左上角,而药丸内容全部散布在它下面并固定在左侧。我已经尝试了很多 CSS 技巧(边距、宽度等),但似乎没有任何东西可以将其
我似乎无法让我的药丸在小屏幕上发挥作用。他们可以在普通屏幕上很好地标记内容,但是一旦我把屏幕变小,这些药丸就无法点击了。 不知道是什么问题 此外,如果我只有药片,它会弹跳,但一旦它在容器中,它就不会弹
下面有一个导航药丸示例,其中有一个导航药丸,并且事件选项卡根据所选选项卡进行切换,效果很好。然而,该链接会将浏览器发送到另一个页面。我希望将有效药丸设置为与离开时相同的药丸。我已经设置了 sessio
我想用下划线替换要渲染的 boostrap pills。1) 因此,事件的“苹果树”将在其背景上显示没有药丸。取而代之的是,文本将被加粗,并且文本下方将有一个 3px 实心下划线(颜色#e9a39c)
我正在使用 Bootstrap Pills 作为菜单,顶部有一个空间。我已经为 删除了间距但我不知道如何摆脱第一个 顶部的空间. .nav-pills > li > a {
我正在使用 bootstrap 开发一个元素。我刚刚在 pills navbar 中添加了一个子菜单,但它不起作用。当我点击消息时没有任何反应 Home Home About I
我正在使用 bootstrap 的 pill 导航栏,出于某种原因,一旦我添加了我的代码,其中包含提供 netflix 感觉的图 block (在 STEMuli 选项卡上),当转到另一个选项卡时,导
我正在使用 HTML 构建我自己的 Pill 组件: .panel1 { width: 100%; } .panel2 { width: 100px; } .pill { display:
我已经尝试使用 nav-pills(来自 bootstrap 3.2.0),但它似乎对我不起作用。这是我的 HTML 代码:
早上好, 不太擅长网络,因此感谢您对我的以下问题的帮助。 在这里,我使用 Bootstrap 药丸而不是选项卡来显示可切换 View 。这在网页中工作,并在单击每个药丸时显示页面。 请检查一下。
我在代码中使用 Bootstrap 药丸,但现在我想在单击药丸时执行另一个操作。但没有一个事件处理程序能够捕获单击事件,任何帮助表示赞赏。谢谢 我已经在 a 标签和父标签上添加了点击事件,我还添加了用
是否可以使用粗下划线渲染 bootstrap navigation pills,与标签文本设置宽度一样宽,如此处所示? 最佳答案 您可以为您的导航栏使用以下样式属性 Jsfidlle with nav
是否可以使用粗下划线渲染 bootstrap navigation pills,与标签文本设置宽度一样宽,如此处所示? 最佳答案 您可以为您的导航栏使用以下样式属性 Jsfidlle with nav
我正在尝试使用 Bootstrap 中的 Dropdown UI 元素设置 Pill,但当我单击插入符号时它没有显示下拉菜单。我查看了 Bootstrap 文档及其来源),但没有找到我遗漏的内容。 我
我是一名优秀的程序员,十分优秀!