画廊中的Bootstrap破碎网格

Question

我正在尝试使用Bootstrap创建一个视频库，根据屏幕大小显示每行不同数量的图像。

我从这篇博文开始：http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/

我的最终结果是：http://jsfiddle.net/mk2r974o/

<div class="container">

  <h2>Video Gallery</h2>
  <ul class="gallery row">

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=0gQk3IvfK0A" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/0gQk3IvfK0A/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">
          Streamline integration with backend systems using MobileFirst
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=Ntt25H6PAxI" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/Ntt25H6PAxI/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">Development</span>

        <span class="label label-info">Android</span>

        <figcaption class="figure-caption">
          Creating a Windows Native C# app connecting to MobileFirst
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=FMTmOUPBhNI" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/FMTmOUPBhNI/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">integration</span>

        <figcaption class="figure-caption">
          Continuous Integration
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=WrCmLJuIMuk" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/WrCmLJuIMuk/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">integration</span>

        <span class="label label-info">Android</span>

        <figcaption class="figure-caption">
          IBM MobileFirst Platform Foundation With Android ProGuard
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=euuvr9DaT5M" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/euuvr9DaT5M/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">Analytics</span>

        <figcaption class="figure-caption">
          Operational Analytics for LOB
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=EQDpRF-9Smc" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/EQDpRF-9Smc/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">Analytics</span>

        <figcaption class="figure-caption">
          Operational Analytics console
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=XtlJI4ZemZQ" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/XtlJI4ZemZQ/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">Analytics</span>

        <figcaption class="figure-caption">
          Operational Analytics Custom Charts
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=cKM5480-6wI" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/cKM5480-6wI/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">java</span>

        <span class="label label-info">adapters</span>

        <figcaption class="figure-caption">
          Getting familiar with Java adapters - part 1
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=Z2QUi33_a5k" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/Z2QUi33_a5k/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">java</span>

        <span class="label label-info">adapter</span>

        <figcaption class="figure-caption">
          Getting familiar with Java adapters - part 2
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=uyeGupYSZj4" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/uyeGupYSZj4/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">OAuth</span>

        <span class="label label-info">security</span>

        <figcaption class="figure-caption">
          OAuth security - part 1
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=eeFBCptXLFU" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/eeFBCptXLFU/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">OAuth</span>

        <span class="label label-info">security</span>

        <figcaption class="figure-caption">
          OAuth security - part 2
        </figcaption>
      </figure>
    </li>

    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>

        <span class="label label-info">CLI</span>

        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">
          Integrating IBM MobileFirst CLI with Grunt
        </figcaption>
      </figure>
    </li>

  </ul>
</div>

有时它看起来很好：

有时它会将缩略图中的一个粘在右边：

Answer 1

尝试为col-*-*类设置固定高度，而不是对它们应用margin-bottom。所以你可以这样写：

.gallery li {
  list-style: none;
  //margin-bottom: 25px; this is not needed
  height: 250px;
}

JSFiddle ：http://jsfiddle.net/mk2r974o/6/

希望有所帮助。

Answer 2

简短回答

这就是bootstrap处理网格列中不一致高度的方式。 （实际上，它比这更深入，但现在让我们回答这个问题。:)）

要修复，请使用以下方法之一：

• 在您的列div
之后应用<div class="clearfix"></div>
• 为列类的css添加一致的高度。

我修补你的小提琴并且在li（当然）之间滑动div.clearfix时遇到了一些麻烦，所以我在你的li上用height:180px更新了它。在您的特定用例中，一致的高度似乎是合适的。

Updated fiddle

更多参与答案

这里发生了什么：

Bootstrap从左到右填充列div，其中空间可用。由于您的前两个div（在屏幕截图中）占据了更多的垂直空间，因此BS在找到第3个div之前找不到下一行的空间。

为什么这些修复工作：

div.clearfix（可能是官方解决方案）做了你期望的clearfix做的事情。

强制高度标准化div占据的垂直空间。如果这不适合您的用例（也许它会截断一些div），您可以使用js解决方案迭代行中的div（可见行，而不是div.row），为它们提供适当的垂直空间需要。

Answer 3

使用clearfix是要走的路，但至少可以说是错综复杂的，我可能不会很好地解释它，所以我提前道歉。

请参阅Responsive Grid Resets

基本上，您必须根据断点清除列。你有一个col-md-2和col-lg-2，所以你可以在6列之后应用clearfix，例如：

<div class="clearfix visible-xs-block visible-md-block visible-lg-block"></div>

然后再次使用col-xs-4：

3列之后

<div class="clearfix visible-xs-block"></div>。

您（并非总是）必须对Responsive utilities类使用clearfix。

请参阅我在Full Page上发布的工作示例，然后慢慢缩小浏览器大小。

（*第二个例子只是为了比较相同的画廊，但是使用col-xs-6，因为它们在col-xs-4上变得非常小）

＆＃13;

＆＃13;

.gallery {
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}
.gallery li {
  list-style: none;
  margin-bottom: 25px;
}
.gallery li figure .thumbnail {
  margin-bottom: 0;
  margin-top: 10px;
}
.gallery li figure figcaption {
  padding-top: 1px;
  font-size: 90%;
}
/**FOR DEMO ONLY**/

#one {
  background: lightblue;
}
#two {
  background: teal;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid" id="one">
  <h2>Video Gallery</h2>

  <ul class="gallery row">
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=0gQk3IvfK0A" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/0gQk3IvfK0A/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Streamline integration with backend systems using MobileFirst</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=Ntt25H6PAxI" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/Ntt25H6PAxI/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">Development</span>
        <span class="label label-info">Android</span>

        <figcaption class="figure-caption">Creating a Windows Native C# app connecting to MobileFirst</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=FMTmOUPBhNI" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/FMTmOUPBhNI/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">integration</span>

        <figcaption class="figure-caption">Continuous Integration</figcaption>
      </figure>
    </li>
    <!-- CLEARFIX XS COL -->
    <div class="clearfix visible-xs-block"></div>
    <!-- CLEARFIX XS COL -->
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=WrCmLJuIMuk" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/WrCmLJuIMuk/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">integration</span>
        <span class="label label-info">Android</span>

        <figcaption class="figure-caption">IBM MobileFirst Platform Foundation With Android ProGuard</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=euuvr9DaT5M" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/euuvr9DaT5M/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">Analytics</span>

        <figcaption class="figure-caption">Operational Analytics for LOB</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=EQDpRF-9Smc" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/EQDpRF-9Smc/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">Analytics</span>

        <figcaption class="figure-caption">Operational Analytics console</figcaption>
      </figure>
    </li>
    <!-- CLEARFIX LG COL -->
    <div class="clearfix visible-xs-block visible-md-block visible-lg-block"></div>
    <!-- CLEARFIX LG COL -->
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=XtlJI4ZemZQ" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/XtlJI4ZemZQ/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">Analytics</span>

        <figcaption class="figure-caption">Operational Analytics Custom Charts</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=cKM5480-6wI" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/cKM5480-6wI/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">java</span>
        <span class="label label-info">adapters</span>

        <figcaption class="figure-caption">Getting familiar with Java adapters - part 1</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=Z2QUi33_a5k" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/Z2QUi33_a5k/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">java</span>
        <span class="label label-info">adapter</span>

        <figcaption class="figure-caption">Getting familiar with Java adapters - part 2</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=uyeGupYSZj4" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/uyeGupYSZj4/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">OAuth</span>
        <span class="label label-info">security</span>

        <figcaption class="figure-caption">OAuth security - part 1</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=eeFBCptXLFU" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/eeFBCptXLFU/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">OAuth</span>
        <span class="label label-info">security</span>

        <figcaption class="figure-caption">OAuth security - part 2</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">CLI</span>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Integrating IBM MobileFirst CLI with Grunt</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">CLI</span>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Integrating IBM MobileFirst CLI with Grunt</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">CLI</span>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Integrating IBM MobileFirst CLI with Grunt</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">CLI</span>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Integrating IBM MobileFirst CLI with Grunt</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">CLI</span>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Integrating IBM MobileFirst CLI with Grunt</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">CLI</span>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Integrating IBM MobileFirst CLI with Grunt</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">CLI</span>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Integrating IBM MobileFirst CLI with Grunt</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">CLI</span>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Integrating IBM MobileFirst CLI with Grunt</figcaption>
      </figure>
    </li>
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
      <figure>
        <a href="//www.youtube.com/watch?v=tFvogRMC4ss" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/tFvogRMC4ss/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">CLI</span>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Integrating IBM MobileFirst CLI with Grunt</figcaption>
      </figure>
    </li>
  </ul>
</div>
<div class="container-fluid" id="two">
  <h2>Example 2</h2>

  <ul class="gallery row">
    <li class="col-xs-6 col-sm-3 col-lg-2">
      <figure>
        <a href="//www.youtube.com/watch?v=0gQk3IvfK0A" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/0gQk3IvfK0A/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">Integration</span>

        <figcaption class="figure-caption">Streamline integration with backend systems using MobileFirst</figcaption>
      </figure>
    </li>
    <li class="col-xs-6 col-sm-3 col-lg-2">
      <figure>
        <a href="//www.youtube.com/watch?v=Ntt25H6PAxI" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/Ntt25H6PAxI/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">Development</span>
        <span class="label label-info">Android</span>

        <figcaption class="figure-caption">Creating a Windows Native C# app connecting to MobileFirst</figcaption>
      </figure>
    </li>
    <!-- CLEARFIXXS COL -->
    <div class="clearfix visible-xs-block"></div>
    <!-- CLEARFIXXS COL -->
    <li class="col-xs-6 col-sm-3 col-lg-2">
      <figure>
        <a href="//www.youtube.com/watch?v=FMTmOUPBhNI" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/FMTmOUPBhNI/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">integration</span>

        <figcaption class="figure-caption">Continuous Integration</figcaption>
      </figure>
    </li>
    <li class="col-xs-6 col-sm-3 col-lg-2">
      <figure>
        <a href="//www.youtube.com/watch?v=WrCmLJuIMuk" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/WrCmLJuIMuk/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">integration</span>
        <span class="label label-info">Android</span>

        <figcaption class="figure-caption">IBM MobileFirst Platform Foundation With Android ProGuard</figcaption>
      </figure>
    </li>
    <li class="col-xs-6 col-sm-3 col-lg-2">
      <figure>
        <a href="//www.youtube.com/watch?v=euuvr9DaT5M" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/euuvr9DaT5M/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">Analytics</span>

        <figcaption class="figure-caption">Operational Analytics for LOB</figcaption>
      </figure>
    </li>
    <li class="col-xs-6 col-sm-3 col-lg-2">
      <figure>
        <a href="//www.youtube.com/watch?v=EQDpRF-9Smc" data-toggle="lightbox" data-width="960" data-gallery="youtubevideos">
          <img src="//img.youtube.com/vi/EQDpRF-9Smc/hqdefault.jpg" class="thumbnail img-responsive">
        </a>
        <span class="label label-info">Analytics</span>

        <figcaption class="figure-caption">Operational Analytics console</figcaption>
      </figure>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;