Question

我有两个独立的盒子，它们是指向其他页面的链接，在每个盒子的底部我都有一个“阅读更多”按钮。

但是因为每个文本框的文本数量不同，这意味着按钮显然不会彼此相邻排列。

我的HTML代码......

 <div class="row text-center">
    <a href="#" class="col-md-3 services">
        <span class="fa-stack fa-4x">
          <i class="fa fa-circle fa-stack-2x text-primary"></i>
          <i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
        </span>
        <h4 class="service-heading">Website Design &amp; Development</h4>
        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit. </p>
        <button type="button" class="btn btn-primary">Read More...</button>
      </a>
      <a href="#" class="col-md-3 services">
        <span class="fa-stack fa-4x">
          <i class="fa fa-circle fa-stack-2x text-primary"></i>
          <i class="fa fa-server fa-stack-1x fa-inverse"></i>
        </span>
        <h4 class="service-heading">Hosting &amp; Domain Management</h4>
        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
        <button type="button" class="btn btn-primary">Read More...</button>
      </a>
</div>

我创建了一支笔，展示了我目前的情况......

https://codepen.io/cjhill44/pen/OQNgxV

我想要的是2'读更多'按钮彼此相邻。

任何人都可以告诉我如何将这些按钮对齐，使它们在各自的div底部彼此相邻。我真的不想为盒子指定一个固定的高度，因为这意味着要为每个断点更改它。

我正在使用bootstrap，并在这里尝试了很多建议的解决方案，但似乎没有一个类似于我的具体问题。

由于

Answer 1

您可以依赖某些引导类在服务中创建flex布局，并使用带有按钮的margin-top:auto，而不需要额外的CSS或HTML更改。

检查此link以获取有关类实用程序的更多详细信息。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" >
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="container">
  <div class="row text-center">
    <a href="#" class="col-md-3 services d-flex flex-column align-items-center">
      <span class="fa-stack fa-4x">
              <i class="fa fa-circle fa-stack-2x text-primary"></i>
              <i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
            </span>
      <h4 class="service-heading">Website Design &amp; Development</h4>
      <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit. </p>
      <button type="button" class="btn btn-primary mt-auto">Read More...</button>
    </a>
    <a href="#" class="col-md-3 services d-flex flex-column align-items-center">
      <span class="fa-stack fa-4x">
              <i class="fa fa-circle fa-stack-2x text-primary"></i>
              <i class="fa fa-server fa-stack-1x fa-inverse"></i>
            </span>
      <h4 class="service-heading">Hosting &amp; Domain Management</h4>
      <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
      <button type="button" class="btn btn-primary mt-auto">Read More...</button>
    </a>
  </div>


</div>

Answer 2

由于您使用的是Bootstrap 4，因此您有机会依赖card-deck。 Card是BS4最新组件之一，card-deck导致其中的所有cards采用相似的维度。通过在card-footer中添加“阅读更多...”链接，您可以确保它始终位于底部。

除了从card-footer删除默认背景外，您可以依赖本机Bootstrap 4类完成所有这些操作。这需要一个新的课程。

.bg-none {
  background: none !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<div class="card-deck">
  <div class="card text-center border-0 bg-none">
    <a href="#" class="services card-body">
      <span class="fa-stack fa-4x">
        <i class="fa fa-circle fa-stack-2x text-primary"></i>
        <i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
      </span>

      <h4 class="service-heading">Website Design &amp; Development</h4>
      <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit. </p>
    </a>
    
    <div class="card-footer border-0 bg-none">
      <a href="#" class="btn btn-primary">Read More...</a>
    </div>
  </div>

  <div class="card text-center border-0">
    <a href="#" class="services card-body">
      <span class="fa-stack fa-4x">
        <i class="fa fa-circle fa-stack-2x text-primary"></i>
        <i class="fa fa-server fa-stack-1x fa-inverse"></i>
      </span>
      
      <h4 class="service-heading">Hosting &amp; Domain Management</h4>
      <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
    </a>
    
    <div class="card-footer border-0 bg-none">
      <a href="#" class="btn btn-primary">Read More...</a>
    </div>
  </div>  
</div>

如何在带引导程序的单独div中将2个按钮彼此相邻放置？

2 个答案: