Question

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

用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的建议添加行可以改善这种情况。 http://www.bootply.com/y7a75YLaQa

但是，图像仍然不对齐：

enter image description here

Answer 1

因为您只使用了一个断点，所以可以通过将每组三个col-sm-4放入他们自己的row中来轻松修复，例如下面的示例。虽然，这可能只是部分修复，因为存在二级对齐问题，具体取决于您的要求......在示例中也可见：

http://www.bootply.com/y7a75YLaQa

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

Answer 2

好的，这是又一步。简而言之，使用visible-xs/hidden-xs类并复制您的标题，将其中一组放在一行中，另一组与您的图像行混合。

http://www.bootply.com/f7eewvCviR

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

这里的最后一个问题是，标题是顶部对齐的，而不是像您的请求那样底部对齐。您可以min-height他们所在的行和vertical-align内容到底部，但这比听起来更难，而且在我看来收益递减......

对齐嵌套行

2 个答案: