Bootstrap下拉菜單/導航佔用整個屏幕寬度（但不應該）

我有以下問題。我正在嘗試創建一個下拉菜單，我主要使用bootstrap。它似乎起初工作，但後來我意識到，下拉菜單佔用整個屏幕寬度，但我不知道爲什麼。我把它塗成紅色，這樣你就可以看到我的意思了。導航菜單似乎流入到下拉菜單中（因爲我只將導航欄顏色變爲紅色，沒有其他內容，但全部變爲紅色）。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; 
}

來源

2017-02-05 George Welder

首先，here is a link一個簡單的引導菜單，以供參考是偉大的。使用Bootstrap菜單時，我總是檢查這些示例。

對於您的具體示例：對於像下拉菜單那樣重疊的東西，您需要一些position: absolute;才能使其工作。

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

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

來源

2017-02-05 23:42:01 Flink

謝謝！我會嘗試一下！ :) –

它的工作，非常感謝！ –

不客氣:) – Flink

Bootstrap下拉菜單/導航佔用整個屏幕寬度（但不應該）

回答

相關問題