Question

我试图将我的btns调整为中心并保持在同一排，我不知道如何实现这一目标。

enter image description here

这就是我所拥有的：

我们所做的我们做什么的潜台词＆lt; / span＆gt; - ＆GT;

  {{-- Left --}}
  <div class="col-lg-4 col-md-4 col-sm-4">
    <div class="feature-img"> <span class="fa fa-graduation-cap fa-5x"></span> </div>
    <h3>Tutti.ed</h3>
    <p style="text-align: justify;" >Tutti.ed is an educational software framework that serves as the backbone for robust digital learning products.

      Your brand, your content, your instructional vision... our technology.

      View our gallery to see sample products.

      <br><br><a class="btn btn-xs btn-primary" href="/tutti-ed">Learn more </a>

    </p>
  </div>


  {{-- Middle --}}
  <div class="col-lg-4 col-md-4 col-sm-4">
    <div class="feature-img"> <span class="fa fa-code fa-5x"></span> </div>
    <h3>Tutti.dev</h3>
    <p style="text-align: justify;" >Tutti.dev makes the work of software professionals easier by facilitating all stages of the software development lifecycle.

      Tutti.dev was created by developers, for developers. We set out to create the toolset we always wished we had to make our work easier.

      <br><br><a class="btn btn-xs btn-primary" href="/tutti-dev">Learn more </a>

    </p>
  </div>


  {{-- Rigth --}}
  <div class="col-lg-4 col-md-4 col-sm-4">
    <div class="feature-img"> <span class="fa fa-shopping-cart fa-5x"></span>
    </div>
    <h3>Services</h3>
    <p style="text-align: justify;" >Aveniros can help your company in every or any phase of development.

      We provide tools and development expertise to every project to ensure a successful launch.

      <br><br><a class="btn btn-xs btn-primary" href="/services">Learn more </a>

    </p>
  </div>


</div>

任何提示/帮助/建议都将不胜感激！

根据我的情况，你们可以给出任何建议。

Answer 1

首先将按钮居中 - 将text-align: center;应用于列（包含元素的按钮）。

其次，你需要它们坚持到底部。将3列包裹在position: relative;和clearfix的行中。

然后是按钮position: absolute; bottom: 0;。在列的底部添加一些填充，以防止按钮出现在列内容上。

希望这有帮助！

body {
  margin: 0;
}
.row {
  position: relative;
}
.col {
  width: 33.333%;
  background: aliceblue;
  text-align: center;
  float: left;
  padding-bottom: 40px;
}
div p {
  text-align: justify;
}
button {
  position: absolute;
  bottom: 0;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

<div class="row clearfix">
  <div class="col">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <button>Button</button>
</div>
<div class="col">
  <p> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <button>Button</button>
</div>
  <div class="col">
  <p> It has survived not only five centuries.</p>
  <button>Button</button>
</div>
</div>

编辑：

使用.clearfix

可以在没有overflow: hidden;的情况下实现

Pen using overflow: hidden;。

Answer 2

您可以用两个方框重复您的行。现在，在框中添加按钮，它将起作用。

  <section class="page-block" id="features">
      <div class="container">
          <div class="row page-header">
             <h2>What We do</h2>
            <span>Subtext for what we do</span>
         </div>
      <div class="row features">
          <div class="col-lg-6 col-md-6 col-sm-6">          
            <h3>Tutti.dev</h3>          
            <p style="text-align: justify;" >blah blah </p>   
      </div>     
      <div class="col-lg-6 col-md-6 col-sm-6">        
          <h3>Tutti.ed</h3>
          <p style="text-align: justify;" >blah blah </p>     
     </div>
   </div>
  <div class="row features">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <button>My Button</button>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
       <button>My Button</button>
    </div>
 </div>
</div>

如何对齐我的按钮以使它们保持在同一条线上？

2 个答案: