在容器底部對齊閱讀更多鏈接

我有以下帶有兩列的引導程式代碼，如下所示。我希望底部有閱讀更多鏈接，右對齊。見圖片。

   <div class="container-fluid">
    <section class="section mt-5">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div>
              <img alt="Web Studio" class="img-fluid" src="https://raw.githubusercontent.com/solodev/vertically-centering/master/images/vc-img-1.jpg" />
            </div>
          </div>
          <div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0">
            <div>
              <h2>Module Studio</h2>
              <p class="margin-top-s">Whether you&rsquo;re a full stack web developer, content author, or business professional &ndash; Solodev gives you the power to build, customize, and manage modules to boost your website.</p>
           <a href="#" class="primary-cta">Read More</a>
           </div>
            
          </div>
        </div>
      </div>
    </section>
    </div>

uj5u.com熱心網友回復：

如果您使用的是 Bootstrap 5，您可以這樣做：

添加position-relative您的 col，如 Saeed Shamloo 之前的回答所說：

<div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0 position-relative">

在鏈接類中添加position-absolute bottom-0 end-0如下：

<a href="#" class="primary-cta position-absolute bottom-0 end-0">Read More</a>

通過這種方式，您不必使用外部 CSS 代碼。您可以在此處找到有關 bootstrap 5 位置類的更多資訊。

所以最后它看起來像這樣：

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <div class="container-fluid">
    <section class="section mt-5">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div>
              <img alt="Web Studio" class="img-fluid" src="https://raw.githubusercontent.com/solodev/vertically-centering/master/images/vc-img-1.jpg" />
            </div>
          </div>
          <div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0 position-relative">
            <div>
              <h2>Module Studio</h2>
              <p class="margin-top-s">Whether you&rsquo;re a full stack web developer, content author, or business professional &ndash; Solodev gives you the power to build, customize, and manage modules to boost your website.</p>
           <a href="#" class="primary-cta position-absolute bottom-0 end-0">Read More</a>
           </div>
            
          </div>
        </div>
      </div>
    </section>
    </div>

uj5u.com熱心網友回復：

如果您制作父元素position: relative，則可以position: absolute在子元素上使用將它們定位在父元素中。此示例應將鏈接放置在距 'container-fluid' 右下角一個字體寬度的位置。

.container-fluid { 
    position: relative;
}

.primary-cta {
    position: absolute;
    right: 1em;
    bottom: 1em;
}

有關更多資訊，請參閱 CSS-Tricks 中 CSS 定位的細分。該鏈接將打開到父 --> 子定位部分。

uj5u.com熱心網友回復：

您可以通過添加position-relative到您的col和position-abosolute bottom-0 end-0您的鏈接來實作，如下所示：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">


<div class="container-fluid">
  <section class="section mt-5">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <div>
            <img alt="Web Studio" class="img-fluid" src="https://raw.githubusercontent.com/solodev/vertically-centering/master/images/vc-img-1.jpg" />
          </div>
        </div>
        <div class="col-md-6 col-lg-5 ml-auto d-flex align-items-center mt-4 mt-md-0 position-relative">
          <div>
            <h2>Module Studio</h2>
            <p class="margin-top-s">Whether you&rsquo;re a full stack web developer, content author, or business professional &ndash; Solodev gives you the power to build, customize, and manage modules to boost your website.</p>
         <a href="#" class="primary-cta position-absolute bottom-0 end-0">Read More</a>
         </div>
          
        </div>
      </div>
    </div>
  </section>
  </div>

標籤：html 推特引导 弹性盒

上一篇：拖動時使jQueryUIDraggableCursor在BootstrapModal中居中

下一篇：如何強制子類實作僅將相同型別的子類作為引數的方法？[復制]