Twitter bootstrap 3 对齐嵌套行

我正在尝试创建一个图像网格（尺寸相等），每个图像都有一个（可变大小）标题。我希望图像水平对齐，但这只适用于文本标题同样长的情况（见下文）。如果文本长度可变（有些图像有一行文本，有些图像有两行文本），如何使文本和图像对齐

用ASCII描述，这就是我想要的：

================================   ================================   ================================
|                              |   |          More text           |   |                              |
|         Text text!           |   |   that doesn't fit in 1 line |   |         Some text!           |
|    ####################      |   |    ####################      |   |    ####################      |
|    ##THIS IS AN IMAGE##      |   |    ##THIS IS AN IMAGE##      |   |    ##THIS IS AN IMAGE##      |
|    ####################      |   |    ####################      |   |    ####################      |
================================   ================================   ================================

================================   ================================   ================================
|          More text           |   |                              |   |                              |
| that doesn't fit in 1 line   |   |         Some text!           |   |         Some text!           |
|    ####################      |   |    ####################      |   |    ####################      |
|    ##THIS IS AN IMAGE##      |   |    ##THIS IS AN IMAGE##      |   |    ##THIS IS AN IMAGE##      |
|    ####################      |   |    ####################      |   |    ####################      |
================================   ================================   ================================

正如@ShawnTaylor所建议的那样，添加行可以改善这种情况。

但是，图像仍然不对齐：

---

因为您只使用了一个断点，所以可以通过将每组三个

col-sm-4

放入各自的

行中来轻松修复断点，如下例所示。不过，这可能只是部分修复，因为存在二次对齐问题，具体取决于您的需求。。。在示例中也可见：



一二
一二三四五六七八
一二
...
好的，还有一步要走。简而言之，使用
visible xs/hidden xs
类复制标题，将其中一组放在一行中，另一组与图像行混合



一二（2）
一二三四五六七（2）
一二（2）
一二（1）
一二三四五六七（1）
一二（1）

这里的最后一个问题是，标题是顶部对齐的，而不是像您的请求那样底部对齐的。您可以
min height
将它们所在的行和
垂直对齐
将内容对齐到底部，但这比听起来更难，而且在我看来，回报是递减的…
谢谢，这改善了情况，但是，图片仍然没有对齐。我更新了我的原始问题，以澄清和反映您的意见suggestions@user2926577将标题/文本放在一个单独的行中（一行用于文本，一行用于图像）。但是这样事情就不会再正确地折叠了。你会有一堆所有的标题，下面是一堆所有的图片
<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <h4>One Two</h4>
            <img src="http://carpetdiscountdundee.co.uk/Gallery/MontBlanc725LightGrey.jpg" class="img-responsive" alt="">
        </div>
        <div class="col-sm-4">
            <h4>One Two Three Four Five Six Seven Eight</h4>
            <img src="http://carpetdiscountdundee.co.uk/Gallery/MontBlanc725LightGrey.jpg" class="img-responsive" alt="">
        </div>
        <div class="col-sm-4">
            <h4>One Two</h4>
            <img src="http://carpetdiscountdundee.co.uk/Gallery/MontBlanc725LightGrey.jpg" class="img-responsive" alt="">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4"> 
...

<div class="container">
  <!-- row of H4s hidden on xs -->  
  <div class="row hidden-xs">
    <div class="col-sm-4">
      <h4>One Two(2)</h4>
    </div>
    <div class="col-sm-4">      
      <h4>One Two Three Four Five Six Seven(2)</h4>      
    </div>
    <div class="col-sm-4">
      <h4>One Two(2)</h4>
    </div>
  </div>

  <!-- your H4s below are connected to each image and only visible on xs -->
  <div class="row">
    <div class="col-sm-4">
      <h4 class="visible-xs">One Two(1)</h4>
        <img src="//placehold.it/720x405" class="img-responsive" alt="">
    </div>
    <div class="col-sm-4">
      <h4 class="visible-xs">One Two Three Four Five Six Seven(1)</h4>
      <img src="//placehold.it/720x405" class="img-responsive" alt="">
    </div>
    <div class="col-sm-4">
      <h4 class="visible-xs">One Two(1)</h4>
      <img src="//placehold.it/720x405" class="img-responsive" alt="">
    </div>
  </div>