I am currently developing a website using Bootstrap CSS and I'm aiming for it to have a similar layout to the Bootstrap Dashboard example. However, I've encountered an issue with the right section of the fixed sidebar scrolling horizontally when I actually want it to be fixed but fluid in width.
For reference, here is the jsfiddle page where you can see the problem: http://jsfiddle.net/K7m5F/embedded/result/
Below is the HTML code:
<div class="container-fluid">
<div class="row-fluid">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li><a href="#" class="Active">ChoiceA</a>
</li>
<li><a href="#">ChoiceB</a>
</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" style="height: 100%; width: 100%;">
<div class="row">This is a test</div>
And here is the CSS styling:
@import url("//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css");
body {
padding-top: 50px;
}
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.sidebar {
display: none;
}
@media (min-width : 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
...