我在这里有一个示例,显示了一个导航栏。导航栏跨越了页面的大部分但不是全部。我想要背景颜色跨越整个页面的宽度(不是链接,只是背景颜色),所以在背景颜色上使用width:100%,但是我尝试在css中menupartial width 100%并不起作用。这是我的示例
body {
padding-top: 51px;
/*padding-bottom: 20px;*/
}
/* Set padding to keep content from hitting the edges */
.front-page-body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
.navbar-inline {
display: inline-flex;
}
#navbarSearchQuery {
float: left;
margin-top: 8px;
margin-left: 15px;
min-width: 280px;
}
@@media only screen and (max-width:768px) {
#navbarSearchQuery {
min-width: 240px;
}
}
#searchQuery {
/*float: left;*/
margin-top: 10px;
/*margin-left: 15px;*/
min-width: 280px;
}
a.navbar-brand {
padding-top: 10px;
padding-bottom: 10px;
}
form#queryWithin {
max-height: 50px;
}
#ClassDate {
cursor: default;
}
.menupartial {
background-color: #16749F;
opacity: .9;
width: 100%;
}
.menupartial a {
color: lightgrey;
font-weight: bold;
}
.nav-pills > li > a {
border-radius: 0;
}
.nav-pills > li > a:hover {
border-radius: 0;
background-color: #16749F;
color: white;
}
.nav-pills > li > a:active {
border-bottom: 5px solid white;
}
<body>
<div class="container body-content">
<div class="row menupartial">
<div class="col-md-12">
<ul class="nav nav-pills">
<li><a href="#">Your Schedules</a>
</li>
<li><a href="#">Your Messages</a>
</li>
<li><a href="#">Your Groups</a>
</li>
<li><a href="#">Your Friends</a>
</li>
</ul>
</div>
</div>
</Div>
</body>
<div class="menupartial">
代替<div class="container-fluid menupartial">
。 - Ronnie