时间戳

首页 > 解决方案 > 在上述列具有偏移量的 boostrap 行下方对齐内容

html - 在上述列具有偏移量的 boostrap 行下方对齐内容

问题描述

我有一排需要 offset-md-1 的锚点/div，我的问题是锚点行下方的内容需要与上面具有偏移量的行对齐并做出响应。我似乎无法弄清楚如何做到这一点。当我在段落上使用边距时，视口缩小时内容会溢出。我也无法设置边距自动的最大宽度，因为上面的行在设计上并不完全是“中心”。有任何想法吗？谢谢你 ：）

html:

      <div class="container">
        <div class="row">
          <a class="offset-md-1 col-md-3 jump-link" href="#">
            <div><p class="font__jump-link">Jump Link 1 offset1</p></div>
          </a>
          <a class="col-md-3 jump-link" href="#">
            <div><p class="font__jump-link">Jump Link 2</p></div>
          </a>
          <a class="col-md-3 jump-link" href="#">
            <div><p class="font__jump-link">Jump Link 3</p></div>
          </a>
        </div>
        <div class="row">
          <p class="p-below-links">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda at 
            commodi dicta, doloremque
            earum eius libero neque repudiandae soluta.</p>
        </div>
      </div>

CSS：

.p-below-links{
 max-width:1050px
 width: 100%;

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

为什么不能只应用相同的偏移量？一般来说，Bootstrap 站点中的所有内容都应该包含在网格中，以实现一致的行为。

<div class="container">
  <div class="row">
    <a class="col-3 offset-xs-1 jump-link" href="#">
      <div>
        <p class="font__jump-link">Jump Link 1 offset1</p>
      </div>
    </a>

    <a class="col-3 jump-link" href="#">
      <div>
        <p class="font__jump-link">Jump Link 2</p>
      </div>
    </a>

    <a class="col-3 jump-link" href="#">
      <div>
        <p class="font__jump-link">Jump Link 3</p>
      </div>
    </a>
  </div>

  <div class="row">
    <div class="col-9 offset-xs-1">
      <p class="p-below-links">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda at commodi dicta, doloremque earum eius libero neque repudiandae soluta.</p>
    </div>
  </div>
</div>

小提琴演示

推荐阅读