文本和按钮的响应式垂直对齐

Question

随着屏幕尺寸的缩小/扩大，我无法确保我的文本和引导按钮保持在引导行的垂直中间。必须有一个简单的方法来实现这一点......

<div class="cta-promo">
  <div class="container">

    <div class="row">

      <div class="hidden-xs col-sm-7 col-md-7 col-lg-8">
        <p class="cta-promo-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere pharetra rhoncus. Sed et lorem vehicula, tincidunt quam at, pharetra nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus eget mollis magna, a fermentum mauris. Mauris orci neque, egestas nec diam nec, vestibulum vestibulum nibh.</p>
      </div>

      <div class="col-xs-12 col-sm-offset-1 col-sm-4 col-md-offset-1 col-md-4 col-lg-offset-1 col-lg-3">
        <button>Apply for this today</button>
      </div>
    </div>

  </div>

这是一个小提琴https://jsfiddle.net/74vsr332/

文本在 xs 视图中隐藏。

Answer 1

要在 Bootstrap 中执行此操作，您可以结合 Flexbox 和媒体查询并在 min-width: 768 时添加规则，因为您使用的是 sm DEMO

@media(min-width: 768px) {
  .flex {
    display: flex;
    align-items: center;
  }
}