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

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

1 个答案: