在容器底部对齐阅读更多 link

Question

我有以下 bootstrap 代码，其中包含两列，如下所示。我希望阅读更多 link 在底部，右对齐。见图。

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

Answer 1

如果您将父元素设为 position: relative，则可以对子元素使用 position: absolute 以将它们定位在父元素中。此示例应将 link 放置在距离 'container-fluid'.

右下角一个字体宽度的位置

.container-fluid { 
    position: relative;
}

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

如需更多信息，请点击此处 breakdown of CSS Positioning from CSS-Tricks。 link 打开父 --> 子定位部分。

Answer 2

您可以将 position-relative 添加到您的 col 并将 position-abosolute bottom-0 end-0 添加到您的 link，如下所示：

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

Answer 3

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

在您的列中添加 position-relative，如 Saeed Shamloo 之前的回答所述：

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

然后在 link class 添加 position-absolute bottom-0 end-0 像这样：

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

这样您就不必使用外部 CSS 代码。您可以找到有关 bootstrap 5 位置 classes 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 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>

在容器底部对齐阅读更多 link

Aligning a read more link at the bottom of a container

html

flexbox

twitter-bootstrap