javascript - Bootstrap 4.1 - 右对齐下拉插入符号
问题描述
我在 Bootstrap 4.1 中工作,我有一个导航栏,它启动一个带有选项卡的模态对话框和一个带有图像图标的下拉菜单。我希望下拉菜单的“插入符号”或向下箭头出现在图像的右侧。
我为该类创建了一个自定义类dropdown-toggle
,并尝试了该类的各种设置,但似乎没有任何效果。这是自定义类:
.dropdown-toggle { align-content: center; }
这是我在 JSFiddle 上的完整代码:https ://jsfiddle.net/tsmolskow/aq9Laaew/254602/
这是代码的模态对话框部分:
<div tabindex="-1" class="modal fade" id="MyNNSModal" role="dialog" aria-hidden="true" aria-labelledby="exampleModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="tabbable">
<!-- Nav Tabs, Modal Nav Bar -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item active">
<a class="nav-link active" href="#aDepartments" data-toggle="tab">Departments</a></li>
<li class="nav-item active">
<a class="nav-link" href="#aResources" data-toggle="tab">Resources</a></li>
<li class="nav-item active">
<a class="nav-link" href="#aProcedures" data-toggle="tab">Procedures</a></li>
<li class="nav-item active">
<a class="nav-link" href="#aNews" data-toggle="tab">News</a></li>
</ul>
</div>
<div class="d-flex align-self-end">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="navbardrop">
<img src="http://media.buzzle.com/media/images-en/illustrations/symbols/1200-12627598-eagle-symbol.jpg" class="profile-picture"/>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Newsfeed</a></li>
<li><a class="dropdown-item" href="#">One Drive</a></li>
<li><a class="dropdown-item" href="#">Sites</a></li>
</ul>
</li>
</ul>
</div>
<!-- Close Button -->
<div>
<button class="close" aria-label="Close" type="button" data-dismiss="modal">
<span aria-hidden="true">
<img class="close-button" src="/sites/dscott/tmfds/SiteAssets/Images/CloseButton.png" alt=""/>
</span>
</button>
</div>
</div>
这是我的自定义 CSS:
.modal-header {
background: #4a4a4a;
padding: 0.005rem; /* Space from Top and Bottom - Works in IE & Edge, Not Chrome */
height: 90px; /* Overall Height - Works in IE & Edge, Not Chrome */
justify-content:space-between;
}
.nav-tabs {
border: 0;
padding: 1rem;
}
.nav-tabs .nav-link {
border: 1px solid transparent;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* DropDown Profile Picture Image */
.dropdown-menu {
background: #4a4a4a;
padding: 0;
color: #fff;
}
/* Size of Font in DropDown Menu */
.nav-tabs .dropdown-menu {
font-size: 0.85rem;
}
.dropdown-item:hover {
background: #000000;
color: #fff;
}
/* DropDown Item Text Color */
.dropdown-item {
color: #fff;
}
.tabs-top {
margin-bottom: 1px;
}
.tabs-4 .nav-tabs > li {
width: 25%;
border: 0;
}
.nav-tabs > li > a {
width: 100%;
border: 0;
background: #4a4a4a;
color: #fff;
border-radius: 0;
text-align: left;
}
/* Change Tab Text Color on Hover */
.nav-tabs > li > a:hover, .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
border: 0;
background: #4a4a4a;
color: #ffd800;
}
/* In-Active Modal Tab - Text, Background */
.nav-tabs > li.active > a {
border: 0;
background: #4a4a4a;
color: #fff;
}
/* Active Modal Tab - Text, Background */
.nav-tabs > li.active > a.active {
border: 0;
background: #4a4a4a;
color: #ffd800;
}
/* Vertically Align Nav Items to the Top */
.nav-item {
vertical-align:top;
}
/* Profile Picture*/
.profile-picture {
display: block;
/*margin-left: auto;*/
/*margin-right: 5px;*/
height: 40%;
width: 60%;
border-radius: 50%;
vertical-align: bottom;
position: relative;
}
/* Profile Picture When Selected */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
background-color: #4a4a4a;
}
.close-button {
/*display: block;*/
margin-left: auto;
margin-right: 0%;
height: 100%;
width: 100%;
border-radius: 10%;
position: relative;
opacity: .2;
}
.tabbable {
width: 100%;
}
.tabbable > ul.nav.nav-tabs {
display: table;
}
.tabbable > ul.nav.nav-tabs > li {
width: auto;
display: table-cell;
}
.tabbable > ul.nav.nav-tabs > li:last-child {
width: 100%;
vertical-align: bottom;
}
.tabbable > ul.nav.nav-tabs > li:last-child ul.dropdown-menu {
width: 100%;
}
.dropdown-toggle {
align-content: center;
}
解决方案
用于.profile-picturedisplay:inline-block
类和.align-self-end类,如下所示:align-self:center
.align-self-end {
align-self: center!important;
}
.profile-picture {
display: inline-block;
}
检查更新的小提琴:https ://jsfiddle.net/j1pz5obs/
推荐阅读
- api - 无法连接到服务器端 API
- android - Android Studio 4.2 在我尝试打开它时没有响应
- python - 为什么在这个例子中没有提出未定义的 NameError?
- angular - 同一客户端的不同重定向 uri - Keycloak + Angular + SpringBoot
- angular - 从 Angular 9 升级到 11,仅对未执行的测试有问题
- sql - MongoDB :: 将 SQL 转换为 MongoDB
- android - Kotlin“何时”不中断(Java 中的 switch case 选项)
- python - 给定字符串中最长和最常见的单词
- kubernetes - 具有规范类型 ClusterIP 和规范类型 Nodeport 的 Kubernetes 服务
- mpi - MPI 在哪里定位新进程?