bootstrap grid in widescreen mode has incorrect div offset - css

Question

I am working on bootstrap code that looks correct on a mobile device but the medieval music div is oddly placed and the pedagogy div is too far down. They should make a 2x2 grid. Can anyone spot why this is happening?
<div class="view-container">
<!-- ngView: --><div data-ng-view="" class="view-frame ng-scope"><!-- ngInclude: --><div data-ng-include="" src="'partials/navbar_sub.html'" class="ng-scope"><!-- ugh...code dup...need the bootstrap attribute in navbar for mainpage -->
<!-- and no scrollspy otherwise -->
<!-- merge this with other navbar, as otherwise they are the same -->
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink ng-scope">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#page-top">The LilyPond Consortium</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="hidden">
</li>
<li>
Services
</li>
<li>
Members
</li>
<li>
Projects
</li>
<li>
Donations
</li>
<li class="hidden">
</li>
<li class="hidden">
</li>
<li>
Log in
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<div ui-view="header" autoscroll="true" class="ng-scope"></div>
<section id="channels" class="bg-light-gray ng-scope">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Channels</h2>
</div>
</div>
<div class="row">
<!-- ngRepeat: channel in channels --><div data-ng-repeat="channel in channels" class="col-sm-6 portfolio-item ng-scope">
<!-- change project pages to angular... -->
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<img data-ng-src="http://placehold.it/400x200" class="img-responsive" alt="" src="http://placehold.it/400x200">
</a>
<div class="portfolio-caption">
<h4 class="ng-binding">Academic Musicology</h4>
<h5 class="ng-binding">Moderator : Urs Liska</h5>
<p class="text-muted ng-binding">
The Academic Musicology channel coordinates efforts between universities and publishers to facilitate the creation of texts used in academic musicology such as articles, books and critical editions.
</p>
<h5>Memberss ...</h5>
</div>
</div><!-- end ngRepeat: channel in channels --><div data-ng-repeat="channel in channels" class="col-sm-6 portfolio-item ng-scope">
<!-- change project pages to angular... -->
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<img data-ng-src="http://placehold.it/400x200" class="img-responsive" alt="" src="http://placehold.it/400x200">
</a>
<div class="portfolio-caption">
<h4 class="ng-binding">Contemporary Music</h4>
<h5 class="ng-binding">Moderator : Foo Bar</h5>
<p class="text-muted ng-binding">
The Contemporary Music channel coordinates the creation of contemporary music symbols and structures useable in LilyPond.
</p>
<h5>Memberss ...</h5>
</div>
</div><!-- end ngRepeat: channel in channels --><div data-ng-repeat="channel in channels" class="col-sm-6 portfolio-item ng-scope">
<!-- change project pages to angular... -->
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<img data-ng-src="http://placehold.it/400x200" class="img-responsive" alt="" src="http://placehold.it/400x200">
</a>
<div class="portfolio-caption">
<h4 class="ng-binding">Medieval Music</h4>
<h5 class="ng-binding">Moderator : John Doe</h5>
<p class="text-muted ng-binding">
Something about medieval music.
</p>
<h5>Memberss ...</h5>
</div>
</div><!-- end ngRepeat: channel in channels --><div data-ng-repeat="channel in channels" class="col-sm-6 portfolio-item ng-scope">
<!-- change project pages to angular... -->
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<img data-ng-src="http://placehold.it/400x200" class="img-responsive" alt="" src="http://placehold.it/400x200">
</a>
<div class="portfolio-caption">
<h4 class="ng-binding">Pedagogy</h4>
<h5 class="ng-binding">Moderator : Florence Nightengale</h5>
<p class="text-muted ng-binding">
The pedagogy channel helps pedagogues improve music theory, composition, history and education snippets created using LilyPond.
</p>
<h5>Memberss ...</h5>
</div>
</div><!-- end ngRepeat: channel in channels -->
</div>
</div>
</section>
</div>
</div>
jsfiddle: http://jsfiddle.net/mikesol/chru1awL/1/

Answer 1

This is a simple issue most people don't think of. Your columns should start a new line on a new row if the content is variable. Because the length of the left column is longer than the right, the next line can't go all the way to the left. Alternatively, you could have a height defined or use jQuery to match height.
Here's the markup solution with Bootstrap:
<div class="row">
<div class="col-sm-6 portfolio-item ng-scope">
content
</div>
<div class="col-sm-6 portfolio-item ng-scope">
content
</div>
</div>
<div class="row">
<div class="col-sm-6 portfolio-item ng-scope">
content
</div>
<div class="col-sm-6 portfolio-item ng-scope">
content
</div>
</div>

Answer 2

I would wrap each visual row on desktops into .row and that will solve your problem:
http://jsfiddle.net/shannabarnard/Lt203vxs/1/
This also means no added script or css, just standard Bootstrap formatting.
<section id="channels" class="bg-light-gray ng-scope">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Channels</h2>
</div>
</div>
<div class="row">
<!-- ngRepeat: channel in channels --><div data-ng-repeat="channel in channels" class="col-sm-6 portfolio-item ng-scope">
<!-- change project pages to angular... -->
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<img data-ng-src="http://placehold.it/400x200" class="img-responsive" alt="" src="http://placehold.it/400x200">
</a>
<div class="portfolio-caption">
<h4 class="ng-binding">Academic Musicology</h4>
<h5 class="ng-binding">Moderator : Urs Liska</h5>
<p class="text-muted ng-binding">
The Academic Musicology channel coordinates efforts between universities and publishers to facilitate the creation of texts used in academic musicology such as articles, books and critical editions.
</p>
<h5>Memberss ...</h5>
</div>
</div><!-- end ngRepeat: channel in channels --><div data-ng-repeat="channel in channels" class="col-sm-6 portfolio-item ng-scope">
<!-- change project pages to angular... -->
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<img data-ng-src="http://placehold.it/400x200" class="img-responsive" alt="" src="http://placehold.it/400x200">
</a>
<div class="portfolio-caption">
<h4 class="ng-binding">Contemporary Music</h4>
<h5 class="ng-binding">Moderator : Foo Bar</h5>
<p class="text-muted ng-binding">
The Contemporary Music channel coordinates the creation of contemporary music symbols and structures useable in LilyPond.
</p>
<h5>Memberss ...</h5>
</div>
</div><!-- end ngRepeat: channel in channels -->
</div>
<div class="row">
<div data-ng-repeat="channel in channels" class="col-sm-6 portfolio-item ng-scope">
<!-- change project pages to angular... -->
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<img data-ng-src="http://placehold.it/400x200" class="img-responsive" alt="" src="http://placehold.it/400x200">
</a>
<div class="portfolio-caption">
<h4 class="ng-binding">Medieval Music</h4>
<h5 class="ng-binding">Moderator : John Doe</h5>
<p class="text-muted ng-binding">
Something about medieval music.
</p>
<h5>Memberss ...</h5>
</div>
</div><!-- end ngRepeat: channel in channels --><div data-ng-repeat="channel in channels" class="col-sm-6 portfolio-item ng-scope">
<!-- change project pages to angular... -->
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<img data-ng-src="http://placehold.it/400x200" class="img-responsive" alt="" src="http://placehold.it/400x200">
</a>
<div class="portfolio-caption">
<h4 class="ng-binding">Pedagogy</h4>
<h5 class="ng-binding">Moderator : Florence Nightengale</h5>
<p class="text-muted ng-binding">
The pedagogy channel helps pedagogues improve music theory, composition, history and education snippets created using LilyPond.
</p>
<h5>Memberss ...</h5>
</div>
</div><!-- end ngRepeat: channel in channels -->
</div>
</div>

Answer 3

You need to start a new row for medieval music and pedagogy
<div class="view-container">
<!-- ngView: --><div data-ng-view="" class="view-frame ng-scope"><!-- ngInclude: --><div data-ng-include="" src="'partials/navbar_sub.html'" class="ng-scope"><!-- ugh...code dup...need the bootstrap attribute in navbar for mainpage -->
<!-- and no scrollspy otherwise -->
<!-- merge this with other navbar, as otherwise they are the same -->
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink ng-scope">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#page-top">The LilyPond Consortium</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="hidden">
</li>
<li>
Services
</li>
<li>
Members
</li>
<li>
Projects
</li>
<li>
Donations
</li>
<li class="hidden">
</li>
<li class="hidden">
</li>
<li>
Log in
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<div ui-view="header" autoscroll="true" class="ng-scope"></div>
<section id="channels" class="bg-light-gray ng-scope">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Channels</h2>
</div>
</div>
<div class="row">
<!-- ngRepeat: channel in channels --><div data-ng-repeat="channel in channels" class="col-sm-6 portfolio-item ng-scope">
<!-- change project pages to angular... -->
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<img data-ng-src="http://placehold.it/400x200" class="img-responsive" alt="" src="http://placehold.it/400x200">
</a>
<div class="portfolio-caption">
<h4 class="ng-binding">Academic Musicology</h4>
<h5 class="ng-binding">Moderator : Urs Liska</h5>
<p class="text-muted ng-binding">
The Academic Musicology channel coordinates efforts between universities and publishers to facilitate the creation of texts used in academic musicology such as articles, books and critical editions.
</p>
<h5>Memberss ...</h5>
</div>
</div><!-- end ngRepeat: channel in channels --><div data-ng-repeat="channel in channels" class="col-sm-6 portfolio-item ng-scope">
<!-- change project pages to angular... -->
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<img data-ng-src="http://placehold.it/400x200" class="img-responsive" alt="" src="http://placehold.it/400x200">
</a>
<div class="portfolio-caption">
<h4 class="ng-binding">Contemporary Music</h4>
<h5 class="ng-binding">Moderator : Foo Bar</h5>
<p class="text-muted ng-binding">
The Contemporary Music channel coordinates the creation of contemporary music symbols and structures useable in LilyPond.
</p>
<h5>Memberss ...</h5>
</div>
</div>
<div class="row">
</div><!-- end ngRepeat: channel in channels --><div data-ng-repeat="channel in channels" class="col-sm-6 portfolio-item ng-scope">
<!-- change project pages to angular... -->
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<img data-ng-src="http://placehold.it/400x200" class="img-responsive" alt="" src="http://placehold.it/400x200">
</a>
<div class="portfolio-caption">
<h4 class="ng-binding">Medieval Music</h4>
<h5 class="ng-binding">Moderator : John Doe</h5>
<p class="text-muted ng-binding">
Something about medieval music.
</p>
<h5>Memberss ...</h5>
</div>
</div><!-- end ngRepeat: channel in channels -->
<div data-ng-repeat="channel in channels" class="col-sm-6 portfolio-item ng-scope">
<!-- change project pages to angular... -->
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<img data-ng-src="http://placehold.it/400x200" class="img-responsive" alt="" src="http://placehold.it/400x200">
</a>
<div class="portfolio-caption">
<h4 class="ng-binding">Pedagogy</h4>
<h5 class="ng-binding">Moderator : Florence Nightengale</h5>
<p class="text-muted ng-binding">
The pedagogy channel helps pedagogues improve music theory, composition, history and education snippets created using LilyPond.
</p>
<h5>Memberss ...</h5>
</div>
</div><!-- end ngRepeat: channel in channels -->
</div>
</div>
</section>
</div>
</div>