html - Bootstrap css 水平对齐元素无法正常工作

Question

我试图使两个相邻的 div 正确地相互水平，但失败了，因为它不适合。

<div class="container">
  <div class="row">
    <div>
      <div class="offer-horizontal">
        <div class="col-xs-12 col-sm-3 col-md-3" style="text-align:center;">
          <img src="https://icon.uiowa.edu/help/wp-content/uploads/2014/07/ICON_logo_only.png" alt="nothing" style="height:20px;width:50px;">
        </div>
        <div class="col-xs-12 col-sm-3 col-md-3">
          <span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span>
          <p>Some really large label that will wrap to multiple lines in small screens</p>
          <div>
            <button>
              shop now
            </button>
          </div>
        </div>
      </div>
      <div class="offer-horizontal">
        <div class="col-sm-3 col-md-3" style="text-align:center;">
          <img src="http://www.iconplc.com/icon-files/images/image-bank-component/other/icon-logo.jpg" style="height:20px;width:50px;">
        </div>
        <div class="col-sm-3 col-md-3">
          <span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span>
          <p>Some really large label that wil</p>
          <div>
            <button>
              shop now
            </button>
          </div>
        </div>
      </div>
      <div class="offer-horizontal">
        <div class="col-sm-3 col-md-3" style="text-align:center;">
          <img src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Icons_logo_normal.jpg" alt="nothing" style="height:20px;width:50px;">
        </div>
        <div class="col-sm-3 col-md-3">
          <span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span>
          <p>Some really large label that will wrap to multiple lines in small screens</p>
          <div>
            <button>
              shop now
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

第一个组件:带有黑色图标的 div

第二个组件:带绿色图标的 div(描述较少)

第三个组件:带有蓝色图标的div

Icon 和 Description 是一个组件，2 个组件应该以相同的高度并排(在台式机和平板电脑中。在这个例子中，我创建了两个组件并排，但由于第二个组件的高度问题为绿色图标的高度低于第三个组件，而不是低于第一个组件，而是低于第二个组件。

基本上我的问题是:如何调整带有绿色图标的第二个组件，使第三个组件正好在第一个组件的下方

感谢任何帮助。

JSFiddle:

JSfiddle

Answer 1

我更新了你的 JSFiddle。

更新:http://jsfiddle.net/okahara/hoekuw3v/1/

它适用于中小型屏幕。我在 html 中重新组织了您的类，并向 offer-horizo​​ntal 添加了一个 min-height。

如果您有任何问题，请告诉我。