我正在研究在移动设备上看起来正确的引导代码,但是中世纪的音乐div位置奇怪且教学方法div太过分了。他们应该制作2x2网格。谁能发现为什么会这样?
<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">
<a href="#page-top"></a>
</li>
<li class="hidden">
<a href="#mission"></a>
</li>
<li>
<a href="#services">Services</a>
</li>
<li>
<a href="#members">Members</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<li>
<a href="#donations">Donations</a>
</li>
<li class="hidden">
<a href="#more"></a>
</li>
<li class="hidden">
<a href="#contact"></a>
</li>
<li>
<a href="#login">Log in</a>
</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>
答案 0 :(得分:3)
这是一个大多数人都没有想到的简单问题。如果内容是可变的,您的列应该在新行上开始一个新行。因为左列的长度比右侧长,所以下一行不能一直向左移动。或者,您可以定义高度或使用jQuery来匹配高度。
以下是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>
答案 1 :(得分:0)
我会将桌面上的每个视觉行包装到.row中,这将解决您的问题:
http://jsfiddle.net/shannabarnard/Lt203vxs/1/
这也意味着没有添加脚本或CSS,只是标准的Bootstrap格式化。
<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>
答案 2 :(得分:0)
你需要为中世纪音乐和教育学开辟新的一行
<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">
<a href="#page-top"></a>
</li>
<li class="hidden">
<a href="#mission"></a>
</li>
<li>
<a href="#services">Services</a>
</li>
<li>
<a href="#members">Members</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<li>
<a href="#donations">Donations</a>
</li>
<li class="hidden">
<a href="#more"></a>
</li>
<li class="hidden">
<a href="#contact"></a>
</li>
<li>
<a href="#login">Log in</a>
</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>