css - 宽屏模式下的 Bootstrap 网格有不正确的 div 偏移量

Question

我正在编写在移动设备上看起来正确的 Bootstrap 代码，但中世纪音乐 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>

jsfiddle:http://jsfiddle.net/mikesol/chru1awL/1/

Answer 1

这是一个大多数人都没有想到的简单问题。如果内容可变，您的列应该在新行开始新行。因为左栏的长度比右栏长，所以下一行不能一直到左边。或者，您可以定义一个高度或使用 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>