时间戳

首页 > 解决方案 > BootStrap 4.1 - 在模态对话框中使用下拉菜单对齐选项卡

javascript - BootStrap 4.1 - 在模态对话框中使用下拉菜单对齐选项卡

问题描述

我正在使用 Bootstrap 4.1，但我无法获得正确的理由来工作。基本上我有一个导航栏，它启动一个带有选项卡的模态对话框。最右侧的选项卡是一个下拉菜单。最右边的下拉菜单是我要右对齐的菜单。这是我到目前为止所尝试的：

  1. 添加ml-auto到<li class='nav-item active dropdown'>代码部分的标记中，注释为：“Modal - Drop Down”
  2. 添加mr-auto到<ul class="nav nav-tabs mr-auto" role="tablist"> 代码部分的标记中，注释为：“Modal - Drop Down”
  3. 添加justify-content-end到<li class="nav-item active dropdown justify-content-end"> 代码部分的标记中，注释为：“Modal - Drop Down”
  4. 添加ml-auto到<li class="nav-item active dropdown justify-content-end ml-auto"> 代码部分的标记中，注释为：“Modal - Drop Down”
  5. 弹性课程 -<div class="d-flex flex-row-reverse bd-highlight">, <div class="d-flex justify-content-end">, <div class="d-flex align-items-end">, <div class="align-self-end">

但没有任何工作。

有没有其他人用 Bootstrap 4.1 做过这个？

我的代码在 JSFiddle 上可用：https ://jsfiddle.net/tsmolskow/jm19hu3t/66/

我的 HTML 代码如下：

<div class="navbar navbar-inverse navbar-fixed-top">
   <div class="container-fluid">
      <div class="navbar-header"></div>
   </div>
</div>

<!-- Navigation Bar -->

    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="#">SharePointGypsy.com</a>
        <button class="navbar-toggler collapsed" aria-expanded="false" aria-controls="navbar" aria-label="Toggle navigation" type="button" data-toggle="collapse" data-target="#navbar">
            <span class="navbar-toggler-icon"></span> 
        </button>
      <div class="navbar-collapse collapse" id="navbar">
         <ul class="nav navbar-nav navbar-right">
            <li class="nav-item active"> 
               <a class="nav-link" id="Departments" data-toggle="modal" data-target="#MyNNSModal">Departments</a></li>
            <li class="nav-item active"> 
               <a class="nav-link" id="Resources" data-toggle="modal" data-target="#MyNNSModal">Resources</a></li>
            <li class="nav-item active"> 
               <a class="nav-link" id="Procedures" data-toggle="modal" data-target="#MyNNSModal">Procedures</a></li>
            <li class="nav-item active"> 
               <a class="nav-link" id="News" data-toggle="modal" data-target="#MyNNSModal">News</a></li>
         </ul>
      </div>
    </nav>

    <!-- Modal -->

      <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">
                            
                            <a class="dropdown-toggle" data-toggle="dropdown" id="navbardrop">
                                <img src="Images/KoKoPelli.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>

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

               <!-- Panes -->

                  <div class="modal-body">
                     <div class="tab-content">

                        <!-- Tab Panes -->

                           <div class="tab-pane active" id="aDepartments">
                              <p> 
                                 <b>Departments:</b> 
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
                           </div>
                           <div class="tab-pane" id="aResources">
                              <p> 
                                 <b>Resources:</b> 
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
                           </div>
                           <div class="tab-pane" id="aProcedures">
                              <p> 
                                 <b>Procedures:</b> 
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
                           </div>
                           <div class="tab-pane" id="aNews">
                              <p> 
                                 <b>News:</b> 
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
                           </div> 
                     </div>
                  </div>

                  <!-- Footer -->

              <div class="modal-footer">​​​​&lt;/div>

            </div>
         </div>
      </div>

标签： javascriptjqueryhtmlcssbootstrap-4

解决方案

你能试一下吗？CSS：

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

推荐阅读