Question

我正在尝试对齐两个div底部的按钮。它们的大小不同，我无法弄明白。如果我给较小的div一个最小高度：514px;在较小的屏幕上它会太大了。

我正在使用Bootstrap。

    <div id="front_page_body" class="container">
    <div>
      <div class="col-md-4 centered">
        <h2>Want to learn programming skills and get a better job?</h2>
        <p>More than just a hacker school, PDX Code Guild offers small class sizes with individual attention. All PDX Code Guild Programs are designed to get you the best education possible in just a few intense months! Jumpstart your career!  <br>
          <br>
          PDX Code Guild offers:</p>
        <ul>
          <li>Python-based Junior Developer Training</li>
          <li>Get Technical! A Workshop for Non-technical Startup Founders</li>
          <li>Assisted Freelancing</li>
        </ul>
        <p>If you're considering upgrading your skills, we would love to hear from you! To start the conversation <a href="contact/">contact us</a>, or take the direct route and apply today!</p>
        <p class="text-center"> <a href="/apply/" class="btn btn-primary btn-lg">Interested!</a> </p>
      </div>

      <div class="col-md-4 centered">
        <h2>Events - PDX Code Guild Python Peer Mentoring Night</h2>
        <p>Come on down to PDX Code Guild for Monday Python Peer Mentoring Night. This event is free and open to the public. We invite all levels of programmers from beginner to expert. There’s something for everyone at this event! You can mentor, learn and network!</p>
        <ul>
          <li>At NedSpace on 5th
          <br/>1400 SW 5th, 3rd floor</li>
        </ul>
        <p class="text-center">
        <a href="http://calagator.org/events/search?tag=PDXCodeGuild" class="btn btn-primary btn-lg" target="_blank">Upcoming Events</a>
        </p>
    </div> <!-- /.col-md-4 --></div>
    </div>

我打算发布一张图片，但我还不够酷。该网站为http://pdxcodeguild.com

Answer 1

我快速而肮脏的解决方案是在崩溃到移动视图之前使用媒体查询并更改两个断点的代码。给按钮一个特殊的类.imabutton并将一个类添加到容器div .imadiv

@media screen only and (min-width: 1230px) {
  .imadiv {min-height:514px;}
  .imabutton {position:absolute; width:100%; bottom:0;
}

@media screen only and (min-width: 990px) {
  .imadiv {min-height:607px;}
}

缺点是每次添加/删除内容时都必须更改这些最小高度。或者，您可以使用javascript强制.imadiv（s）到相同的高度，并使用与上面相同的.imabutton代码。像这样的东西 -

如何在两个不同尺寸的DIV下对齐两个按钮，同时保持响应？

1 个答案: