Question

如何在折叠时更改下拉菜单中链接的颜色和字体大小，并在完整尺寸时不更改下拉菜单？这是视觉上我在问的问题：1

以下是我目前的代码：http://jsbin.com/bigoxeyuri/edit?css,output 您可以看到完整大小的链接，折叠是两种不同的颜色 - 折叠是我想要更改的默认灰色。谢谢。

    /*Navbar color full size and collapsed including drop down list*/
.navbar-default {
background-color: #B4A890;
border-color: #B4A890;
}

/*Link color for top links; but not drop down list*/
.navbar-default .navbar-nav > li > a {
color: #f5ebdb; 
}

/*Link hover color; full size & collapsed; but not drop downlist*/
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #110a02;
}


/* Drop down menu's Full Size only background color*/
.navbar-nav > li > .dropdown-menu 
{ background-color: #ffffff;
    font-size: 12px; /*size for full size and collapsed*/
}

/* Link color for drop down list & its rows' hover color for full size menu only*/
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus 
{
color: #f5ebdb;
text-decoration: none;
background-color: #B4A890;
background-image: none;  
}


/* Drop down list Title Cell background collapsed & full*/
.dropdown-toggle:active, .open .dropdown-toggle 
{
        background:#f5ebdb !important; 
        color:#110a02 !important;
}

.nav > li > a:hover,
.nav > li > a:focus {
    text-decoration: none; /* affects top main links*/
    background-color: white; /* ???Change rollover cell color here*/
  }

/*???BACKGROUND color for active*/
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >   
 a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #000000;
background-color: #ffffff;
}

/* 3-bar button - color */
.navbar-toggle {
    background-color: #B4A890;
}
/* 3-bar button - stripes */
.navbar-default .navbar-toggle .icon-bar {
    background-color: #f5ebdb;
}

/* 3-bar button - color hover */
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #c2b89f;
}

/* 3-bar button - border */
.navbar-default .navbar-toggle {
  border-color: #c2b89f;
}

Answer 1

导航栏折叠的唯一时间是屏幕的像素大小。您应该了解CSS中的媒体规则以了解更多信息。

    @media (max-width: 767px) { //mobile width that collapses the navbar
        body {
            background-color: blue; //changes the background color to blue
        }
    }

Here is an example on W3 schools

Answer 2

这是解决方案

/* solution */
    @media(max-width:768px){
      .navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu>li {
        color: #FFF;
        font-size: 16px;
      }
    }

我已更新您的代码 jsbin

navbar - 如果仅在下载时在下拉菜单中更改“链接的颜色和字体大小”（当它是完整大小时，不是链接的颜色）？

2 个答案: