Question

我在Bootstrap 4.1中工作，我有一个Navbar，它会启动带有选项卡的模态对话框和带有图像图标的下拉菜单。我希望下拉菜单的“插入符号”或向下箭头显示在图像的右侧。

我已经为.dropdown-toggle { align-content: center; }类创建了一个自定义类，并且已经尝试了该类的各种设置，但是似乎没有任何效果。这是自定义类：

      <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>

这是我在JSFiddle上的完整代码：https://jsfiddle.net/tsmolskow/aq9Laaew/254602/

这是代码的“模态对话框”部分：

.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;
}

这是我的自定义CSS：

public class SpringContextUtil implements ApplicationContextAware {

    private static ApplicationContext applicationContext;

    public void setApplicationContext(ApplicationContext applicationContext)
            throws BeansException {
        SpringContextUtil.applicationContext = applicationContext;
    }

    public static ApplicationContext getApplicationContext() {
        return applicationContext;
    }

    public static Object getBean(String beanId) throws BeansException {
        return applicationContext.getBean(beanId);
    }
}

Answer 1

为类 .profile-picture 使用display:inline-block，为类 .align-self-end 使用align-self:center，如下所示：

.align-self-end {
   align-self: center!important;
}
.profile-picture {
    display: inline-block;
}

检查更新的小提琴：https://jsfiddle.net/j1pz5obs/

Answer 2

添加显示的CSS规则：内嵌在.dropdown-toggle :: after？

.dropdown-toggle::after {
    display: inline;
}

Bootstrap 4.1-右对齐下拉箭头

2 个答案: