Question

我有以下问题。我正在尝试创建一个下拉菜单，我主要使用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;
}

Answer 1

首先，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/

Bootstrap Dropdown菜单/导航占用整个屏幕宽度（但不应该）

1 个答案: