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

Question

我正在尝试将三列 - 关于，services＆amp;Why_us一排，并且在每列中具有一个"读取更多"选项的"按钮"。我试图使这三个按钮具有相同的水平层。如果我定义身高＆amp;在CSS中的位置用于列＆amp;按钮，这些布局在不同的屏幕尺寸处被扭曲。（就像按钮重叠内容）。请帮助解决。

这是我的代码：

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>