Having problems getting my personal site to look good with Bootstrap. Two specific problems:
When I make the window narrower, the Blog column "collapses" onto the Exploratory Skills table. This shouldn't happen at all since the two columns are in separate div blocks. The desired behavior is for the Blog column to move underneath the Exploratory Skills table when the window narrows. The skills table is nested in a [[div style="float:left"]] element. If I take this out, the page layout responds correctly. But I don't want to take this out because I want the table to be left-justified in its column, not centered.
The other issue is that the page content isn't using the full width of the page. You can see this in the Blog list, where the longest line wraps even though there is plenty of room for it.
Here is my custom layout code:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<nav class="navbar-fixed-top navbar-default" role="navigation">
<div class="navbar-header">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><strong>Jay Bienvenu</strong></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<div class="pull-right">[[module LoginStatus]]</div>
<div class="pull-right">[[search_box]]</div>
<div>[[topbar]]</div>
</div>
</nav>
<div class="container-fluid" style="position: absolute; top: 70px"><div class="row"><div class="col-xs-12">
[[content]]
<hr>
[[if breadcrumbs]]
<div class="page-tags"><i class="icon icon-sitemap"></i> [[breadcrumbs]]</div>
[[/if]]
[[if tags]]
<div class="page-tags"><i class="icon icon-tags"></i> [[tags]]</div>
[[/if]]
<div class="page-tags">To comment on this page, please use <a href="http://twitter.com/jbnv">Twitter</a>.</div>
[[module PageOptionsBottom]]
[[module FooterBar]]
</div></div></div>Thanks for your help.
