Bootstrap 折叠菜单不显示样式

Question

当我在我的网站上打开折叠的 menu/nav 时（折叠的菜单以 XS 和 SM 屏幕尺寸显示），我没有收到下拉菜单的任何样式，链接只是排成一排，这ofc对我来说是个问题。我不知道为什么样式不起作用，我检查了我的 php 文档是否与我的 bootstrap.css 等链接。如果有人能帮我解决这个问题，我会很高兴。

网站：http://www.haagmedia.dk/klf

HTML

<!-- MENU/NAV MD & LG  MENU/NAV MD & LG  MENU/NAV MD & LG  MENU/NAV MD & LG -->

<div class="row hidden-xs">    

    <div class="navbar-fixed-top">   

        <div class="navbar">
            <ul>
                <li><a href="index.php">NYHEDER</a></li>
                <li><a href="holdet.php">HOLDET</a></li>
                <li><a href="kampe.php">KAMPE</a></li>
            </ul>

            <a href="index.php"><img src="images/klf_logo.png" class="logo-knap"></a>  

            <ul>
                <li><a href="support.php">SUPPORT</a></li>
                <li><a href="om-klf.php">OM KLF</a></li>
                <li><a class="active" href="kontakt.php">KONTAKT</a></li>
            </ul>
        </div>

    </div>

</div>


<!-- MENU/NAV XS & SM  MENU/NAV XS & SM  MENU/NAV XS & SM  MENU/NAV XS & SM -->     

<div class="visible-xs">   

<div class="navbar navbar-default navbar-fixed-top">

  <div class="container-fluid">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a href="index.php"><img style="margin-right: -46px;" src="images/klf_logo1.png"></a> 

    </div>

    <div class="navbar-collapse collapse">  
            <ul class="nav navbar-nav">
                <li><a href="index.php">NYHEDER</a></li>
                <li><a href="holdet.php">HOLDET</a></li>
                <li><a href="kampe.php">KAMPE</a></li>
                <li><a href="support.php">SUPPORT</a></li>
                <li><a href="om-klf.php">OM KLF</a></li>
                <li><a class="active" href="kontakt.php">KONTAKT</a></li>
            </ul>
    </div>

  </div>

</div>

</div>  

<!-- MENU/NAV SLUT  MENU/NAV SLUT  MENU/NAV SLUT  MENU/NAV SLUT  MENU/NAV SLUT -->

CSS

/* MENU/NAV  MENU/NAV  MENU/NAV  MENU/NAV  MENU/NAV */
.navbar {
    border: 1px solid transparent;
    height: 91px;
    margin: auto;
    z-index: 1000;
    box-shadow:  0px 1px 14px #A4ABB0;
    background-color: #FFFFFF;
    font-size: 15px;
    text-align: center;
}

.navbar ul {
    padding: 0;
    list-style-type: none;
    display: inline-block;
    margin: auto;
}

.navbar ul>li {
    float: left;
    display: inline;
}

.navbar ul>li>a {
    color: #A4ABB0;
    padding: 42px 29px 23px 29px;
    text-decoration: none;
    text-transform: uppercase; 
    font-weight: bold;
    border-bottom: 5px solid #FFFFFF;
}

.navbar .active {
    color: #208AF0; 
    border-bottom: 5px solid #208AF0;
}

.navbar ul>li>a:hover {
    color: #208AF0;
    border-bottom: 5px solid #208AF0;
}

.navbar a>img {
    position: relative;
    display: inline-block;
}



/* MENU/NAV COLLAPSED   MENU/NAV COLLAPSED   MENU/NAV COLLAPSED   MENU/NAV COLLAPSED */
.navbar-toggle {
  margin-top: 24px;
}

.navbar-toggle .icon-bar {
  width: 30px;
  height: 5px;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #FFFFFF;
}

.navbar-default .navbar-toggle {
  border-color: #FFFFFF;
}

.navbar-default .navbar-toggle.collapsed {
    border-color: #FFFFFF;
}

.navbar-default .navbar-toggle.collapsed .icon-bar {
    background-color: #A4ABB0;
}

.navbar-default .navbar-toggle .icon-bar{
    background-color:#208AF0;
}

Answer 1

您正在覆盖 bootstrap css，这没问题，但您必须小心，请查看第 28 行的 stylesheet.css：

.navbar ul>li {
  float: left;
  display: inline;
}

在您的第 35 行：

.navbar ul>li>a {
  color: #A4ABB0;
  padding: 42px 29px 23px 29px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  border-bottom: 5px solid #FFFFFF;
}

这些样式总是应用于您的 .navbar，因此您的 "mobile navbar"（即 XS ans SM）出现了这种错误行为。

您可以添加一些 media queries 来修复它，这样您就可以根据您的显示尺寸将不同的样式角色应用到您的 navbar。

一些media query例子：

@media(max-width: 767px){
  .navbar ul>li {
    // your css to make your collapsed menu works as you wish
    // just remove your float and it will shows as a list
    // and not in a row
  }

  .navbar ul>li a {
    // display block, small padding should works too
    display: block;
    padding: 15px 29px 5px 29px;
  }

  .navbar ul {
    // also set you ul to display block so your list be get 100% width
    display: block;
  }
}

你可以使用多个媒体查询，所以你只需要有创意:)

Bootstrap 折叠菜单不显示样式

Bootstrap collapsed menu doesn't show styling

html

css

mobile

navbar

twitter-bootstrap