Question

当我在我的网站上打开折叠的菜单/导航（折叠的菜单显示在XS和SM屏幕尺寸）时，我没有收到我的下拉菜单的任何样式，链接只是排成一列，这是一个问题为了我。我不知道为什么样式不起作用，我检查了我的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，因此您的＆＃34;移动导航栏＆＃34; （即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折叠菜单不显示样式

1 个答案: