个人中心
gpt4 book ai didi

javascript - Bootstrap 下拉菜单/导航占据整个屏幕宽度(但不应该)

转载 作者：太空宇宙 更新时间：2023-11-04 09:12:04 25 4
gpt4 key购买 nike

我有以下问题。我正在尝试创建一个下拉菜单，为此我主要使用 Bootstrap 。起初它似乎有效，但后来我意识到下拉菜单占据了整个屏幕宽度，但我不知道为什么。我把它涂成红色，这样你就能明白我的意思了。导航栏菜单似乎流入了下拉菜单(因为我只将导航栏涂成红色，没有别的，但它全部变成了红色)。

红色背景应该只位于上方导航菜单(上方框)的后面，而不是更远的地方。它应该是白色的，除了下拉框。

到目前为止，这是我的代码:

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Some Title</title>

    <link rel="stylesheet" type="text/css" href="style2.css">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <div class="container-fluid nopadding navbar"> <!-- NAVBAR -->
      <div class="row">

        <div class="container-fluid col-xs-12 col-sm-12 col-md-10"> <!-- MENU -->
          <div class="row">

            <div class="dropdown col-xs-12 col-sm-2">
              <div class="container-fluid">
                <div class="row">
                  <button class="dropbtn col-xs-12">Welcome</button>
                </div>
              </div>
            </div>

            <div class="dropdown col-xs-12 col-sm-2">
              <div class="container-fluid">
                <div class="row">
                  <button class="dropbtn col-xs-12">Dropdown</button>
                  <div class="dropdown-content col-xs-12 nopadding">
                    <a href="#">Software<br />entwicklung</a>
                    <a href="#">Qualitats<br />sicherung</a>
                  </div>
                </div>
              </div>
            </div>

            <div class="dropdown col-xs-12 col-sm-2">
              <div class="container-fluid">
                <div class="row">
                  <button class="dropbtn col-xs-12">Our Company</button>
                  <div class="dropdown-content col-xs-12 nopadding">
                    <a href="#">Some Stuff</a>
                    <a href="#">Some more Stuff</a>
                  </div>
                </div>
              </div>
            </div>

            <div class="dropdown col-xs-12 col-sm-2">
              <div class="container-fluid">
                <div class="row">
                  <button class="dropbtn col-xs-12">Find us</button>
                </div>
              </div>
            </div>

            <div class="dropdown col-xs-12 col-sm-2">
              <div class="container-fluid">
                <div class="row">
                  <button class="dropbtn col-xs-12">Contact </button>
                </div>
              </div>
            </div>

          </div>
        </div> <!-- MENU END -->

        <div class="col-xs-12 col-md-2">
          <div class="logo_aligner">
            <!-- <img src="images/logonav.svg" class="hs-logo" alt="Some Text"> -->
          </div>
        </div>

      </div>
    </div> <!-- NAVBAR END -->
  </body>

</html>

CSS:

/* Dropdown Button */
.dropbtn {
    background-color: #F6F8FB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 100%;

    background-color: #F6F8FB;
    font-family: AlegreyaSansSC-Light;
    font-size: 16px;
    color: #637F92;
    letter-spacing: 0.52px;

    height: 81px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #F6F8FB;
    min-width: 160px;
    z-index: 1;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background: rgb(221, 232, 241); /* Fallback for older browsers without RGBA-support */
  background: rgba(221, 232, 241, 0.95);
}

/*Smartphones */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .dropdown-content {
    width: 100%;
    text-align: center;
  }
  .hs-logo {
    visibility: hidden;
  }
}

/*Tablets */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  .hs-logo {
    visibility: hidden;
  }

  .dropbtn {
    font-size: 12px;
    padding: 0;
  }
}

/* Normal Browser resize */
@media screen
  and (max-width: 1024px) {

  .hs-logo {
    visibility: hidden;
  }
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 30px;
    text-align: center;
    text-decoration: none;
    display: block;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background: rgb(221, 232, 241); /* Fallback for older browsers without RGBA-support */
  background: rgba(221, 232, 241, 0.95);
}

.hs-logo {
  width: 100%;
  height: 25px;
}

.nopadding { /* Important for the contents of the dropdown menu, since bootstrap is applied*/
   padding: 0 !important;
   margin: 0 !important;
}

.logo_aligner {
  background-color: red;

  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar {
  background-color: red;
}

最佳答案

首先，here is a link到一个简单的 Bootstrap 菜单，非常适合引用。在使用 Bootstrap 菜单时，我总是检查这些示例。

对于您的具体示例:对于像下拉列表这样的重叠内容，您需要一些 position: absolute; 才能正常工作。

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
    top: 80px;
    position: absolute;
}

完整示例:https://jsfiddle.net/flink1991/566j7bht/

关于javascript - Bootstrap 下拉菜单/导航占据整个屏幕宽度(但不应该)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42058415/

25 4 0
文章推荐： Ruby 或 Bash 或 Grep 正则表达式不适用于 '?'，即前一个字符出现 0 次或 1 次
文章推荐： java - 如果两个库的类具有相同的类和包名称供其内部使用
文章推荐： java - Android 中如何停止铃声闹钟？
文章推荐： javascript - 更改背景颜色和文本，逻辑是否存在但脚本不起作用？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com