Navbar药丸中的Bootstrap4.1.x下拉菜单仅将标签内容称为

时间：2018-12-07 10:54:35

标签： bootstrap-4

我对药丸和药丸含量敏感的Navbar运行良好。当我尝试在导航栏内实现下拉菜单时，我意识到它不起作用，因为药丸内容链接表明下拉列表仅是有效的。当调用另一个选项卡时，链接也保持活动状态。

因此，如何实现类似于药丸并且还具有与可折叠药丸导航栏相同的功能的向下渗透。可折叠药丸内的可折叠药丸吗？

https://jsfiddle.net/LuckyLuzz/7j2oe0pb/ 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    
    
    <nav class="navbar  navbar-expand-md navbar-light border-bottom">
        <div class="container-fluid   justify-content-center" id="navbarwidth">
            <a class="navbar-brand" href="#">
                <span class="menu-collapsed pl-4 ml-4">LOGO</span>
            </a>
            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse text-center justify-content-center" id="navbarNavDropdown">
                <div class="nav nav-pills nav-fill flex-column flex-md-row" id="pills-tab" role="navigation">
                    <a class="nav-link  active " id="pills-status-tab" data-toggle="tab" href="#pills-status"
                        role="tab" aria-controls="pills-status" aria-selected="true">
                        <p class="div" data-toggle="collapse" data-target=".navbar-collapse.show" aria-expanded="false"
                            aria-controls="collapseThree" href="#">Dashboard
                        </p>
                    </a>
                    <a class="nav-link" id="pills-led-tab" data-toggle="tab" href="#pills-led" role="tab"
                        aria-controls="pills-led" aria-selected="false">
                        <p class="div" data-toggle="collapse" data-target=".navbar-collapse.show" aria-expanded="false"
                            aria-controls="collapseThree" href="#">TEST1
                        </p>
                    </a>
                    <a class="nav-link" id="pillsv-pH-tab" data-toggle="tab" href="#pills-pH" role="tab"
                        aria-controls="pills-pH" aria-selected="false">
                        <p class="div" data-toggle="collapse" data-target=".navbar-collapse.show" aria-expanded="false"
                            aria-controls="collapseThree" href="#">TEST2
                        </p>
                    </a>
                    <!--DROPDOWN----------------------------------------------->
                    <a class="nav-link dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="tab">Menu 1
                            
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a class="nav-link " id="pills-Dstatus-tab" data-toggle="tab" href="#pills-Dstatus"
                                    role="tab" aria-controls="pills-Dstatus" aria-selected="true">
                                    <p class="div" data-toggle="collapse" data-target=".navbar-collapse.show"
                                        aria-expanded="false" aria-controls="collapseThree" href="#">Dashboard
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a class="nav-link" id="pills-Dled-tab" data-toggle="tab" href="#pills-Dled"
                                    role="tab" aria-controls="pills-Dled" aria-selected="false">
                                    <p class="div" data-toggle="collapse" data-target=".navbar-collapse.show"
                                        aria-expanded="false" aria-controls="collapseThree" href="#">TEST1
                                    </p>
                                </a>
                            </li>
                        </ul>
                    </a>
                     <!--DROPDOWN----------------------------------------------->
                </div>
            </div>
        </div>
    </nav>
    <div class="tab-content" id="pills-tabContent">
        <!-- Status------------------------------------------------------------------------------------------------------>
        <div class="tab-pane active" id="pills-status" role="tabpanel" aria-labelledby="pills-status-tab">
            DASHBOARD
        </div>
        <div class="tab-pane" id="pills-led" role="tabpanel" aria-labelledby="pills-led-tab">
            TEST1
        </div>
        <div class="tab-pane" id="pills-pH" role="tabpanel" aria-labelledby="pills-pH-tab">
            TEST2
        </div>
         <div class="tab-pane" id="pills-Dstatus" role="tabpanel" aria-labelledby="pills-Dstatus-tab">
           Dropdown DASHBOARD
        </div>
        <div class="tab-pane" id="pills-Dled" role="tabpanel" aria-labelledby="pills-Dled-tab">
           Dropdown TEST1
        </div>
    </div>

1 个答案:

答案 0 :(得分：0)

以下是一个示例，希望对您有所帮助，请遵循bootstrap 4.1的文档

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<style>
#pills-tab li.nav-item.dropdown.show .nav-link {
  background: transparent;
  padding-right: .5rem;
  padding-left: .5rem;
}
#pills-tab li.nav-item.dropdown.show .nav-link.active {
  background: #007bff;
}
</style>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">LOGO</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
    <ul class="nav nav-pills mb-3 navbar-nav" id="pills-tab" role="tablist">
     <li class="nav-item">
      <a class="nav-link active" id="pills-dashboard-tab" data-toggle="pill" href="#pills-status" role="tab" aria-controls="pills-status" aria-selected="true">Dashboard</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-test1-tab" data-toggle="pill" href="#pills-led" role="tab" aria-controls="pills-led" aria-selected="false">TEST1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-TEST2-tab" data-toggle="pill" href="#pills-pH" role="tab" aria-controls="pills-pH" aria-selected="false">TEST2</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#"  id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
      </a>
      <ul class="dropdown-menu nav-pills" aria-labelledby="navbarDropdown" role="tablist">
        <a class="nav-link" id="pills-dashboardinner-tab" data-toggle="pill" href="#pills-Dstatus" role="tab" aria-controls="pills-status" aria-selected="false">Dashboard</a>
        <a class="nav-link" id="pills-test1inner-tab" data-toggle="pill" href="#pills-Dled" role="tab" aria-controls="pills-led" aria-selected="false">TEST1</a>
      </ul>
    </li>
  </ul>
</div>
</nav>
<div class="tab-content" id="pills-tabContent">
  <!-- Status------------------------------------------------------------------------------------------------------>
  <div class="tab-pane active" id="pills-status" role="tabpanel" aria-labelledby="pills-status-tab">
    DASHBOARD
  </div>
  <div class="tab-pane" id="pills-led" role="tabpanel" aria-labelledby="pills-led-tab">
    TEST1
  </div>
  <div class="tab-pane" id="pills-pH" role="tabpanel" aria-labelledby="pills-pH-tab">
    TEST2
  </div>
  <div class="tab-pane" id="pills-Dstatus" role="tabpanel" aria-labelledby="pills-Dstatus-tab">
   Dropdown DASHBOARD
 </div>
 <div class="tab-pane" id="pills-Dled" role="tabpanel" aria-labelledby="pills-Dled-tab">
   Dropdown TEST1
 </div>
</div>
相关问题
最新问题