kuhaku kuhaku - 1 month ago 10
CSS Question

Bootstrap container running off the screen

I'm trying to have the screen separated to two cols, one with width 9 and the other 3. On the right column I need a container to hold rows, but it seems that it doesn't want to stay in its col and it shoots off to the right.

If I take out the container, then all the buttons and things in that col become vertical, how can I prevent it from shooting off like that and keep the structure of the buttons to be horizontal?

Here's a small example:

http://www.bootply.com/JfUvsLOmpj

<div class="row">
<div class="col-md-9" id="boardArea">
<table id="board"></table>
</div>
<div class="col-md-3">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row" id="firstRow">
<div class="col-md-12">
<div id="controlPanel">
<div class="col-md-12 text-center">
<button href="#" class="btn btn-default btn-sm" id="filled">Mark</button>
<button href="#" class="btn btn-default btn-sm" id="empty">Clear</button>
<button href="#" class="btn btn-default btn-sm" id="unknown">Unknown</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


PS: There are more rows on the same level as
firstRow
.

Answer

The problem is you've nested a container into the first col-md-3 div. Containers have a set width and should only be used to wrap your rows in. So the hierarchy should go container > row > col > row > col > row > col ...

Comments