代码之家  ›  专栏  ›  技术社区  ›  Sam B.

导航栏上的引导程序下拉列表将内容向下推

twitter-bootstrap css html
  •  0
  • Sam B.  · 技术社区  · 7 年前

    单击前

    单击后

    <HTML> <!--图像和文本--> <img src=“img/bootstrap solid.svg”width=“30”height=“30”class=“d-inline-block-align top”alt=“> </a> <a class=“nav link dropdown toggle”href=“”id=“navbarDropdownmenulink”data toggle=“dropdown”aria haspoop=“true”aria expanded=“false”> </a> </body>

    单击前

    enter image description here

    enter image description here 

    <!DOCTYPE html>
<html>
<head>
    <title>Notifications</title>

    <meta charset="utf-8"/>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/notification.css">

    <script type="text/javascript" src="js/jquery-3.3.1.slim.min.js"></script>
    <script type="text/javascript" src="js/popper.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
    <!-- Image and text -->
    <nav class="navbar navbar-light">
      <a class="navbar-brand" href="#">
        <img src="img/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
        Bootstrap
      </a>

      <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Notifications <span class="badge badge-secondary">0</span>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
         </li>
      </ul>
    </nav>


</body>
</html>
    4 回复  |  直到 7 年前
        1
  •  1
  •   לבני מלכה    7 年前

    在引导程序中对导航的默认定义是下推内容…
    position: absolute; ul 

    ul{
    position: absolute;
    right: 50px;
    top: 14px;
}
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/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.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <!-- Image and text -->
    <nav class="navbar navbar-light">
      <a class="navbar-brand" href="#">
        <img src="img/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
        Bootstrap
      </a>
<div>
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Notifications <span class="badge badge-secondary">0</span>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
         </li>
      </ul>
      </div>
    </nav>
        2
  •  1
  •   Roohi Zuwairiyah Pritam    7 年前 

        <body>
    <!-- Image and text -->
    <nav class="navbar navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="img/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">Bootstrap
      </a>

      <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Notifications <span class="badge badge-secondary">0</span>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
         </li>
      </ul>
    </div>
    </nav>
   </body>
        3
  •  0
  •   Saurabh Mistry    7 年前 

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
        4
  •  0
  •   BlizZard    7 年前 
    .dropdown-menu{
position:absolute;
}

    position absolute

    推荐文章
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    8 月前
    Mass  ·  如何在Tailwind CSS v4中创建配置
    8 月前
    magenta placenta  ·  将css变量合并为一个变量
    8 月前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    8 月前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    8 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    8 月前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    8 月前
    Ben Halicki  ·  带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列
    8 月前
    Luckkks  ·  过渡色工作不正常
    8 月前
    ModernEraCaveman  ·  如何对齐我的Bootstrap容器以适应网页的整个宽度?
    8 月前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号