Как я могу выровнять свои кнопки так, чтобы они оставались в одной строке?

Question

Я пытаюсь привести мои btns в центр и остаться в одной строке, и я не уверен, как это сделать.

---

Это то, что у меня есть:

Что мы делаем подтекста за то, что мы делаем </SPAN> ->

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

Вы можете повторить свой ряд с двумя коробками. Теперь добавьте свои кнопки в боксы, и он будет работать.

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

Answer 2

Сначала центрируйте кнопку - примените 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>

EDIT:

Может быть достигнуто без .clearfix с помощью overflow: hidden;

Pen using overflow: hidden;.