Reputation: 4315
I'm trying Bootstrap on a small project, But there is something I don't understand or I should do wrong. Here is my snippet:
nav{
background-color: lightblue;
}
section{
background-color: lightgreen;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<header class="page-header"></header>
<div id="mainContainer" class="row">
<nav class="col-sm-12 col-md-2">
<ul class="nav nav-pills nav-stacked">
<li>Home</li>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</nav>
<section class="col-sm-12 col-md-10">
Here is my content.
</section>
</div>
</div>
An horizontal scroll bar appears, how can I properly fix it, without adding external css rule, using only Bootstrap ones?
Upvotes: 5
Views: 12357
Reputation: 1
Add a wrapper around the .row with the .overflow-hidden class:
<div class="container overflow-hidden">
Upvotes: 0
Reputation: 1121
You are missing the container class within your HTML markup, it needs to be:
<div class="container">
<div class="row">
<div class="col-sm-12">
</div>
</div>
</div>
Here is your code with the container class added:
nav{ background-color: lightblue; } section{ background-color: lightgreen; }
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<header class="page-header"></header>
<div class="container">
<div id="mainContainer" class="row">
<nav class="col-sm-12 col-md-2">
<ul class="nav nav-pills nav-stacked">
<li>Home</li>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</nav>
<section class="col-sm-12 col-md-10">
Here is my content.
</section>
</div>
</div>
</div>
Upvotes: 3
Reputation: 19007
You need a use .container
for a responsive fixed width Container. Add this class to your div
<div id="mainContainer" class="row container">
.container
for a responsive fixed width container..container-fluid
for a full width container, spanning the entire width of your viewport.Upvotes: 9
Reputation: 1166
I believe you forgot your container.
nav{ background-color: lightblue; } section{ background-color: lightgreen; }
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<header class="page-header"></header>
<div class="container">
<div id="mainContainer" class="row">
<nav class="col-sm-12 col-md-2">
<ul class="nav nav-pills nav-stacked">
<li>Home</li>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</nav>
<section class="col-sm-12 col-md-10">
Here is my content.
</section>
</div>
</div>
</div>
Upvotes: 3