宽屏模式下的引导网格的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>

Answer 2

我会将桌面上的每个可视化行包装到.row中，这将解决您的问题：

http://jsfiddle.net/shannabarnard/Lt203vxs/1/

这也意味着没有添加脚本或css，只有标准的引导格式。

 <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

你需要为中世纪音乐和教育学开始新的一行。

    <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>