javascript - Bootstrap 中文本和图像的列未对齐

Question

从所附的屏幕截图中可以看出，如果第一列的文本多于第二列，则会导致视觉故障。

如何在 Bootstrap 中解决这个问题？

演示: https://jsfiddle.net/oLderkuo/

<div class="container">

    <div class="portfolio-gallery row">

        <div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
            <span class='sub-gallery-icon'>
                <a href='#' >
                    <img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
                </a>
            </span>
            <span class='wp-caption-text gallery-caption'><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. 
            </span>
        </div>

        <div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
            <span class='sub-gallery-icon'>
                <a href='#' >
                    <img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
                </a>
            </span>
            <span class='wp-caption-text gallery-caption'><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            </span>
        </div>

        <div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
            <span class='sub-gallery-icon'>
                <a href='#' >
                    <img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
                </a>
            </span>
            <span class='wp-caption-text gallery-caption'><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. 
            </span>
        </div>

</div>

CSS:

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

Answer 1

您需要将文本包装在 <p> 中标记并将其宽度设置为 img宽度 请参阅下面的演示:

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
  margin: 10px;
}
p {
  width: 300px;
}

<div class="container">

  <div class="portfolio-gallery row">

    <div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
      <span class='sub-gallery-icon'>
				<a href='#' >
					<img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
				</a>
			</span>
      <span class='wp-caption-text gallery-caption'><br />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. 
      </p></span>
    </div>

    <div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
      <span class='sub-gallery-icon'>
				<a href='#' >
					<img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
				</a>
			</span>
      <span class='wp-caption-text gallery-caption'><br /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      </p></span>
    </div>

    <div class='gallery-item col-md-4 col-sm-6 col-xs-12'>
      <span class='sub-gallery-icon'>
				<a href='#' >
					<img width="300" height="200" src="http://placehold.it/300x200" class="gallery-thumb-img wp-post-image" alt="" />
				</a>
			</span>
      <span class='wp-caption-text gallery-caption'><br /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget leo leo. Sed sed pretium quam, ut bibendum libero. In semper arcu eget faucibus hendrerit. 
      </p></span>
    </div>

  </div>