我有以下 HTML （ASP）
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="col-sm-2 col-xs-1 sidebar-offcanvas" id="sidebar" runat="server">
<!-- Added -->
<div class="logo-header">
<img src="Images/logo-small.png" />
</div>
<!-- Added -->
<ul class="nav hidden-xs" id="lg-menu">
<li runat="server" id="Home"><a href="home.aspx"><i class="fa fa-home fa-fw"></i> Home</a></li>
<li runat="server" id="Customers"><a href="customers.aspx"><i class="fa fa-user fa-fw"></i> Customers</a></li>
<li runat="server" id="Reports"><a href="reports.aspx"><i class="fa fa-bar-chart-o fa-fw"></i> Reports</a></li>
<li runat="server" id="AdminPanel"><a href="adminpanel.aspx"><i class="fa fa-dashboard fa-fw"></i> Admin Panel</a></li>
</ul>
<!-- tiny only nav-->
<ul class="nav visible-xs" id="xs-menu">
<li runat="server" id="Li1"><a href="home.aspx"><i class="fa fa-home fa-fw"></i> </a></li>
<li runat="server" id="Li2"><a href="customers.aspx"><i class="fa fa-user fa-fw"></i> </a></li>
<li runat="server" id="Li3"><a href="reports.aspx"><i class="fa fa-bar-chart-o fa-fw"></i> </a></li>
<li runat="server" id="Li4"><a href="adminpanel.aspx"><i class="fa fa-dashboard fa-fw"></i> </a></li>
</ul>
</div>
<!-- /sidebar -->
<!-- main right col -->
<div class="col-sm-10 col-xs-11" id="main">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" />
</div>
</div><!-- /.row -->
</div>
和 CSS ：
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
}
#sidebar {
padding:0px;
padding-top:15px;
}
#sidebar, #sidebar a {
color: #951013;
padding-left:5px;
}
#sidebar .nav li>a:hover {
color: #951013;
background-color: #f5f5f5;
}
#sidebar .active > a,
#sidebar .active > a:hover,
#sidebar .active > a:focus {
color: #fff;
background-color: #951013;
}
/* adjust the contents on smaller devices */
@media screen and (max-width: 968px) {
.visible-xs{display:block!important;}
.hidden-xs{display:none!important;}
}
如您所见，我希望将默认最大宽度增加/覆盖为968px，但是当我这样做时，可见-xs（微小导航）可见< strong>宽度不会改变。它仍然需要是767然后只有字形图标没有空格到右边。如何使visible-xs与默认值相同但在968px上？ 谢谢
答案 0 :(得分：1)
我的答案中有两种解决方案：
1）避免使用列的不同代码库，因此随着视口的改变，侧边栏不会缩小;您可以使用媒体查询更改侧边栏的宽度，并获得更多控制权以及侧边栏是固定的，以便您滚动浏览侧边栏始终存在的页面的主要内容。当您在968px时隐藏文本时，链接具有相同的想法。
2）使用现有代码，而不是使用两个单独的菜单，您可以使用课程在968px时隐藏导航文本。
解决方案＃1（新代码库）
body,
html {
height: 100%;
}
body {
padding-top: 60px;
}
.sidebar-fixed {
margin-top: 60px;
padding-left: 18px;
padding-right: 18px;
position: fixed;
width: 150px;
height: 100%;
top: 0;
left: 0;
background: none;
}
ul.sidebar-list {
list-style: none;
display: inline;
text-align: left;
}
ul.sidebar-list > li {
padding-bottom: 15px;
}
ul.sidebar-list > li > a {
color: #951013;
text-decoration: none;
}
ul.sidebar-list > li > a:hover,
ul.sidebar-list > li > a:focus {
color: #450C0E;
}
.main-content {
margin-left: 150px;
}
@media (max-width: 968px) {
.sidebar-fixed {
width: 85px;
}
.main-content {
margin-left: 85px;
padding: 0;
}
ul.sidebar-list {
text-align: center;
}
.sidebar-fixed li .nav-text {
display: none;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="http://placehold.it/50x20/f00">
</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="sidebar-fixed" id="sideNavParent" runat="server">
<div class="logo-header">
<img src="http://placehold.it/50x50/f00/fff?text=Logo" />
</div>
<ul class="sidebar-list">
<li runat="server" id="Home">
<a href="home.aspx"> <i class="fa fa-home fa-fw"></i><span class="nav-text"> Home</span>
</a>
</li>
<li runat="server">
<a href="#"> <i class="fa fa-user fa-fw"></i><span class="nav-text"> Customers</span>
</a>
</li>
<li runat="server">
<a href="#"> <i class="fa fa-bar-chart-o fa-fw"></i><span class="nav-text"> Reports </span>
</a>
</li>
<li runat="server">
<a href="#"> <i class="fa fa-dashboard fa-fw"></i><span class="nav-text"> Admin Panel </span>
</a>
</li>
</ul>
</div>
<div class="main-content">
<div class="container-fluid">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" />
<div class="alert alert-danger">Bootstrap Sidebar Navigation</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.
</p>
</div>
</div>
</div>
解决方案＃2（原始代码库）
body {
padding-top: 60px;
}
#sidebar {
padding: 0px;
padding-top: 15px;
}
#sidebar,
#sidebar a {
color: #951013;
padding-left: 5px;
}
#sidebar .nav li>a:hover {
color: #951013;
background-color: #f5f5f5;
}
#sidebar .active > a,
#sidebar .active > a:hover,
#sidebar .active > a:focus {
color: #fff;
background-color: #951013;
}
@media (max-width: 968px) {
#lg-menu .hidden-item {
display: none;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="http://placehold.it/50x20">
</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="col-sm-2 col-xs-1 sidebar-offcanvas" id="sidebar" runat="server">
<!-- Added -->
<div class="logo-header">
<img src="http://placehold.it/50x50" />
</div>
<!-- Added -->
<ul class="nav" id="lg-menu">
<li runat="server" id="Home"><a href="home.aspx"><i class="fa fa-home fa-fw"></i><span class="hidden-item"> Home</span></a>
</li>
<li runat="server" id="Customers"><a href="customers.aspx"><i class="fa fa-user fa-fw"></i><span class="hidden-item"> Customers</span></a>
</li>
<li runat="server" id="Reports"><a href="reports.aspx"><i class="fa fa-bar-chart-o fa-fw"></i><span class="hidden-item"> Reports</span></a>
</li>
<li runat="server" id="AdminPanel"><a href="adminpanel.aspx"><i class="fa fa-dashboard fa-fw"></i><span class="hidden-item"> Admin Panel</span></a>
</li>
</ul>
</div>
<!-- /sidebar -->
<!-- main right col -->
<div class="col-sm-10 col-xs-11" id="main">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" />
<div class="well">Well Well</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.</p>
</div>
</div>
<!-- /.row -->
</div>