Bootstrap 3如何让按钮在不同的列中处于相同的水平位置

Question

我试图把三列-关于，服务和Why_Us在一行，并有一个“按钮”的“阅读更多”选项在每一列。我试图使这三个按钮有相同的水平水平。如果我在CSS中定义列和按钮的高度和位置，这些列和按钮的布局在不同的屏幕大小下会失真。(就像覆盖内容的按钮)。请帮助解决。

以下是我的代码：

CSS：

<style>
.intro_col{
    height: auto;
    background-color: #EEEEEE;
    margin: 30px 1.35%;
    padding-bottom: 30px;
    box-shadow:-8px 8px 0px 2px #E0E0E0;
} 

#intro .btn-info{
  position: absolute;
  bottom: 4%;
  right: 4%;
}

</style>

HTML

<!-- Container (About & Services Section) -->
<div id="intro" class="container text-center">
  <div class = "row">
       <div class="col-sm-4 intro_col" id="about">
          <h2>About Us</h2>
          <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
          <button type="button" class="btn pull-right btn-info">Read More</button>
       </div>

       <div class="col-sm-3 intro_col" id="services">
          <h2>Services</h2>

          <ul>
            <li>SERVICE-1</li>
            <li>SERVICE-2</li>
            <li>SERVICE-3</li>
            <li>SERVICE-4</li>
            <li>SERVICE-5</li>
            <li>SERVICE-6</li>
            <li>SERVICE-7</li>
            <li>SERVICE-8</li>
          </ul>
          <button type="button" class="btn pull-right btn-info">Read More</button>
        </div>
       <div class="col-sm-4 intro_col" id="why_us">
          <h2>Why Choose Us</h2>
          <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
          <button type="button" class="btn pull-right btn-info">Read More</button>
       </div>
       <div class="clearfix"></div>

</div> 

谢谢

Answer 1

我认为这将适用于您，假设您也想要等高列：

​

.intro_col {
  height: auto;
  background-color: #EEEEEE;
  margin: 30px 1.35%;
  padding-bottom: 60px;
  box-shadow: -8px 8px 0px 2px #E0E0E0;
}

#intro .btn-info {
  position: absolute;
  bottom: 4%;
  right: 4%;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Container (About & Services Section) -->
<div id="intro" class="container text-center">
  <div class="row row-eq-height">
    <div class="col-sm-4 intro_col" id="about">
      <h2>About Us</h2>
      <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
        up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
      <button type="button" class="btn pull-right btn-info">Read More</button>
    </div>

    <div class="col-sm-3 intro_col" id="services">
      <h2>Services</h2>

      <ul>
        <li>SERVICE-1</li>
        <li>SERVICE-2</li>
        <li>SERVICE-3</li>
        <li>SERVICE-4</li>
        <li>SERVICE-5</li>
        <li>SERVICE-6</li>
        <li>SERVICE-7</li>
        <li>SERVICE-8</li>
      </ul>
      <button type="button" class="btn pull-right btn-info">Read More</button>
    </div>
    <div class="col-sm-4 intro_col" id="why_us">
      <h2>Why Choose Us</h2>
      <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line
        of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
      <button type="button" class="btn pull-right btn-info">Read More</button>
    </div>
    <div class="clearfix"></div>

  </div>

​