在容器底部对齐阅读更多链接

Posted 2023-03-07

【中文标题】在容器底部对齐阅读更多链接

【英文标题】：Aligning a read more link at the bottom of a container

【发布时间】：2022-01-18 15:04:08

【问题描述】：

我有以下带有两列的引导代码，如下所示。我想在底部有阅读更多链接，右对齐。见图片。

   <div class="container-fluid">
    <section class="section mt-5">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div>
              <img  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>

【问题讨论】：

请标记您的 Bootstrap 版本。

【参考方案1】：

如果你使用的是 Bootstrap 5，你可以这样做：

如之前 Saeed Shamloo 的回答所说，在你的 col 中添加 position-relative：

<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 位置类的信息here。

所以最终它会是这样的：

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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  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>

【参考方案2】：

如果您将父元素设为position: relative，您可以在子元素上使用position: absolute 将它们定位在父元素中。此示例应将链接放置在距离“container-fluid”右下角一个字体宽度的位置。

.container-fluid  
    position: relative;


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

如需了解更多信息，请联系breakdown of CSS Positioning from CSS-Tricks。该链接将打开到父 --> 子定位部分。

【讨论】：

不需要自定义 CSS。 Bootstrap 提供的类可以完成您所展示的所有内容。

【参考方案3】：

您可以通过将position-relative 添加到您的col 和position-abosolute bottom-0 end-0 到您的链接来做到这一点，如下所示：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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  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>