代码之家  ›  专栏  ›  技术社区  ›  dds

Bootstrap下拉菜单导航栏

bootstrap-4 web css html javascript
  •  0
  • dds  · 技术社区  · 11 月前

    我本周开始学习Bootstrap,遇到了下拉菜单的问题。我想让它漂浮在我的导航栏外,但它卡住了。我尝试了各种方法,但都没有奏效。

    代码如下:

      家 联系
    • 关于
      • 书
    • 行动
    • 另一项行动
    • 这里还有别的东西 
    <li style="margin-right: 20px; margin-left: 20px;"><a href="index.html">Home</a></li>
<li style="margin-right: 20px;"><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<div class="dropdown">
  <button style="margin-bottom: 30px; background-color: #1e1bc0; border: none; color: white; padding: 15px 32px; text-align:
    center; text-decoration: none;display: inline-block;font-size: 16px; " class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Books
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="book.html">Action</a></li>
    <li><a class="dropdown-item" href="book.html">Another action</a></li>
    <li><a class="dropdown-item" href="book.html">Something else here</a></li>
  </ul>

</div>

    我尝试使用引导链接,但仍然面临同样的问题,需要有人审查/评估我的代码并解释问题。

    here's the picture of the problem

    我的完整html代码: 

    <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Library</title>
  <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-QJHXA4xXhqF6u7m0POKlVRxXJPwNQN1VkjFrAUmCs5uWKhBKechrU7EFhxkjRNSS"
    crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link rel="stylesheet" href="my.css">

</head>

<body>
  <ul>
    <li style="margin-right: 20px; margin-left: 20px;"><a href="index.html">Home</a></li>
    <li style="margin-right: 20px;"><a href="contact.html">Contact</a></li>
    <li><a href="about.html">About</a></li>
    <div class="dropdown">
      <button style="margin-bottom: 0px; background-color: #1e1bc0; border: none; color: white; padding: 15px 32px; text-align:
        center; text-decoration: none;display: inline-block;font-size: 16px; " class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Books
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="book.html">Action</a></li>
        <li><a class="dropdown-item" href="book.html">Another action</a></li>
        <li><a class="dropdown-item" href="book.html">Something else here</a></li>
      </ul>

    </div>

  </ul>

  <div class="row1">
    <h1>Library</h1>
  </div>
  <div id="carouselExampleDark" class="carousel carousel-dark slide">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"
        aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active" data-bs-interval="10000">
        <img src="h.jpg" class="d-block w-100" alt="study_laptop">
        <div class="carousel-caption d-none d-md-block">
          <h5>World Wide Shipping</h5>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="carousel-item" data-bs-interval="2000">
        <img src="j.jpg" class="d-block w-100" alt="book">
        <div class="carousel-caption d-none d-md-block">
          <h1 style="color: rgb(10, 8, 34); ">Anywhere in the world</h1>
        </div>
      </div>
      <div class="carousel-item">
        <img src="i.jpg" class="d-block w-100" alt="lib">
        <div class="carousel-caption d-none d-md-block">
          <h3>Learn now!</h3>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>

  <div class="row flex-nowrap">
    <div class="col-md-4">
      <pre><h3 style="margin-top: 50px;">
               Why Choose
                   Us?
      </h3></pre>
      <pre class="text1" style="font-size: 16px;">
        <b>
                      Lorem ipsum dolor sit amet,
                       consectetur adipiscing elit,
                      sed do eiusmod tempor incididunt
                      ut labore et dolore magna aliqua,
                      Molestie nunc non blandit massa.
          </b>

      </pre>
    </div>

    <div class="col-md-3">
      <div class="card" style="width: 18rem; height: 300px">
        <img src="card2.jpg" class="card-img" alt="card" height="160px">
        <div class="card-body">
          <h5 class="card-title">Lorem</h5>
          <p class="card-text">Lorem ipsum dolor sit amet.</p>
          <a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" Target="_blank" class="primary">Read more></a>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card" style="width: 18rem">
        <img src="card.jpg" class="card-img" alt="card">
        <div class="card-body">
          <h5 class="card-title">Lorem</h5>
          <p class="card-text">Lorem ipsum dolor sit amet.</p>
          <a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" Target="_blank" class="primary">Read more></a>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card" style="width: 18rem; height: 300px;">
        <img src="card1.jpg" class="card-img" alt="card  ">
        <div class="card-body">
          <h5 class="card-title">Lorem</h5>
          <p class="card-text">Lorem ipsum dolor sit amet.</p>
          <a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" Target="_blank" class="primary">Read More> </a>
        </div>
      </div>
    </div>
  </div>
  </div>
  <div class="row mt-2">
    <h2 style="margin-top: 20px; margin-bottom: 30px;">Read More</h2>

    <div class="col-sm-6 mb-3 mb-sm-0">
      <div class="card bg-pink">
        <div class="card-body">
          <h5 class="card-title">To Know more</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
            ut labore et dolore magna aliqua.</p>
          <a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" class="btn btn-primary">Click here</a>
        </div>
      </div>
    </div>
    <div class="col-sm-6 margin-bottom:10px">
      <div class="card bg-pink">
        <div class="card-body">
          <h5 class="card-title">Our Online Library</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
            ut labore et dolore magna aliqua.</p>
          <a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" class="btn btn-primary">Click here</a>
        </div>
      </div>
    </div>
  </div>

  <!-- <div id="intro">
    <p id="intro1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim euismod felis, volutpat egestas orci
      fringilla id. Vivamus nec aliquet dolor, non varius mauris. Mauris ut dolor at massa aliquet imperdiet vel
      consectetur risus. In tempus porttitor interdum. Nulla ligula urna, finibus non quam vitae, hendrerit viverra
      nibh. In hac habitasse platea dictumst. Donec volutpat elit eget justo accumsan, id volutpat felis auctor. Integer
      imperdiet fringilla dui. Aliquam eu lobortis turpis. Etiam vel dui ut tellus aliquam condimentum. Vivamus tellus
      mi, efficitur sed erat eu, blandit feugiat orci. Donec sed condimentum ex, eget blandit neque. Suspendisse sodales
      odio a quam tempor, et scelerisque justo placerat. Aliquam cursus imperdiet ligula eget placerat. Curabitur et
      fringilla nisi, ut egestas ex. Vestibulum turpis nisi, laoreet vitae libero rutrum, pharetra molestie dui.
    </p>
  </div> -->
  <footer class="bg-secondary text-center ">
    <div class="container p-4">
      <section class="mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x"
          viewBox="0 0 16 16">
          <path
            d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube"
          viewBox="0 0 16 16">
          <path
            d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z" />
        </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
          class="bi bi-instagram" viewBox="0 0 16 16">
          <path
            d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin"
          viewBox="0 0 16 16">
          <path
            d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
        </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github"
          viewBox="0 0 16 16">
          <path
            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
        </svg>
      </section>
      <section class="mb-4">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt
          distinctio earum repellat quaerat voluptatibus placeat nam,
          commodi optio pariatur est quia magnam eum harum corrupti dicta,
          aliquam sequi voluptate quas.
        </p>
      </section>
    </div>
    <div class="text-center p-3" style="background-color: rgb(196, 105, 105)">
      © Made by Venom_Fury:
      <a class="text-dark" href="https://venomfury.com/">Venomfury.com</a>
    </div>
  </footer>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>

</body>

</html>

    //我的完整css代码 

    body {
    background: #93afa4;
}

#intro1 {
    color: black;
    font-family: cursive, sans-serif;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #1e1bc0;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #123cf7;
}

.search1 {
    background-color: #1bc78ed2;
    border: none;
    color: white;
    text-decoration: none;
    margin-right: 5px;
    margin-top: 7px;
    float: right;
    display: block;
    text-align: center;
    padding: 6px;
    font-size: 17px;
}

.search2 {
    margin-right: 7px;
    margin-top: 5px;
    float: right;
    display: block;
    color: black;
    text-align: center;
    padding: 6px;
    text-decoration: none;
    font-size: 17px;
}

.card {
    /* margin-top: 20px; */
    margin-right: 22px;
    margin-left: 22px;
    /* margin-bottom: 30px; */
}

.row {
    height: 200px;
    /* display: flex; */
    align-items: end;
    justify-content: end;
    margin-right: 20px;
    margin-top: 170px;
    /* margin-bottom: 20px; */
}

.carousel-item {
    height: 80vh;
}

footer {
    margin-top: 100px;
    text-align: center;
    padding: 3px;
    background-color: rgb(139, 175, 209);
    color: white;

}

.row1 {
    color: darkgrey;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("d.jpeg")
}

h3 {
    font-size: 30px;
}
h2{
    /* align-items: start; */
    /* align-self:flex-start; */
    margin-top: 30px;
    margin-bottom: 20px;
    text-align:center;
}
    1 回复  |  直到 11 月前
        1
  •  0
  •   Aziz Marzouki    11 月前

    试试这个: 

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item" style="margin-right: 20px; margin-left: 20px;">
                <a class="nav-link" href="index.html">Home</a>
            </li>
            <li class="nav-item" style="margin-right: 20px;">
                <a class="nav-link" href="contact.html">Contact</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="about.html">About</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Books
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" href="book.html">Action</a></li>
                    <li><a class="dropdown-item" href="book.html">Another action</a></li>
                    <li><a class="dropdown-item" href="book.html">Something else here</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
    推荐文章
    seriously  ·  按钮中元素的对齐
    3 年前
    USK  ·  引导模型在我的HTML文件中不起作用
    3 年前
    onit  ·  如何在单击按钮时从页面(引导程序4)隐藏或删除搜索表单?
    3 年前
    Noor ul ain Ibrahim  ·  如何在一行中制作两个大小相同的按钮?
    3 年前
    user9644796  ·  如何检查折叠的导航栏是否打开?
    7 年前
    JoeSlav  ·  使用引导上载损坏的文件
    7 年前
    John  ·  引导程序4,表单内联未在XS视图上对齐
    7 年前
    J. Sparks  ·  奇怪的图像定位(HTML、CSS、Bootstrap)
    7 年前
    user9719859  ·  如何在bootstrap 4中更改选择选项programmaticaly?
    7 年前
    im5an  ·  如何使用angular在单行中显示徽标和导航栏?
    7 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号