Question

我想把三栏 - 关于，服务＆amp; Why_Us在一行中并且有一个＆＃34; Button＆＃34; for＆＃34;阅读更多＆＃34;每列中的选项。我试图使这三个按钮具有相同的水平。如果我定义高度＆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>

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

1 个答案: