Question

我有一个页脚，在引导程序中有4列。我希望每个div有相同的高度。有没有办法做到这一点？

此外，尝试调整视图窗口的大小以查看宽度较小时会发生什么（响应式设计），我也想让它工作。

JSBin： JSBin

代码：

我的HTML：

<div class="row footer">
    <div class="col-sm-3 leftspan footer-menu col-md-3 col-xs-6">
        <div class="footer-title">
             The Trust
        </div>
        <ul class="list-unstyled">
            <li>
            <a href=".">
            xxx</a></li>
            <li>
            <a href=".">
            xxx</a></li>
            <li>
            <a href=".">
            yyy</a></li>
            <li>
            <a href=".">
            xxx</a></li>
        </ul>
        <div class="separator">
        </div>
    </div>
    <div class="col-sm-3 leftspan footer-menu col-md-3 col-xs-6">
        <div class="footer-title">
             Connect with us
        </div>
        <table class="footer-image-links">
        <tbody>
        <tr>
            <td>
                <a href="http://facebook.com">
                <img src="/../_layouts/images/icon-facebook.png"></a>
            </td>
            <td>
                <a href="http://twitter.com">
                <img src="/../_layouts/images/icon-twitter.png"></a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="http://linkedin.com">
                <img src="/../_layouts/images/icon-linkedin.png"></a>
            </td>
            <td>
                <a href="http://youtube.com">
                <img src="/../_layouts/images/icon-youtube.png"></a>
            </td>
        </tr>
        </tbody>
        </table>
        <div class="separator">
        </div>
    </div>
    <div class="col-sm-3 leftspan footer-menu col-md-3 col-xs-6">
        <div class="footer-title">
             Useful links
        </div>
        <ul class="list-unstyled">
            <li>
            <a href=".">
            xxx</a></li>
            <li>
            <a href=".">
            yyy</a></li>
            <li>
            <a href=".">
            zzz</a></li>
            <li>
            <a href=".">
            xxx</a></li>
            <li>
            <a href=".">
            zzz</a></li>
            <li>
            <a href=".">
            yyy</a></li>
        </ul>
        <div class="separator">
        </div>
    </div>
    <div class="col-sm-3 footer-menu col-md-3 col-xs-6">
        <div class="footer-title">
             For staff
        </div>
        <ul class="list-unstyled">
            <li>
            <a href=".">
            zzz</a></li>
            <li>
            <a href=".">
            xxx</a></li>
            <li>
            <a href=".">
            ccc</a></li>
            <li id="LoginFooter" style="display: none;">
            <a href="/_layouts/Authenticate.aspx">
            vvv</a></li>
        </ul>
        <div class="separator">
        </div>
    </div>
</div>

我的css：

.footer
{
    margin-top: 15px;
}
.footer-menu
{
    background: #344754;
}

.footer .footer-image-links img
{
    margin-left: 5px;
    margin-right: 15px;
    margin-bottom: 20px;
}

.footer-menu .separator
{
    border-right: 2px dotted #ccc;
    position: absolute;
    right: 0;
    top: 15px;
    bottom: 10px;
}

.footer-menu .footer-title
{
    font-weight: bold;
    padding-top: 15px;
    margin-bottom: 10px;
    color: #B4D22A;
    font-family: "Verdana";
    font-size: 14px;
}

.footer-menu .mini-logo
{
    margin-right: 5px;
    margin-bottom: 2px;
}

.footer a
{
    color: white;
    font-family: "Verdana";
    font-size: 14px;
}

.footer li
{
    padding-top: 5px;
}

.copyright
{
    background: #B4D22A;
    color: white;
    height: 30px;
    text-align: left;
    line-height: 30px;
    font-size: 8pt;
}

.copyright > div
{
    margin-left: 10px;
}

由于

Answer 1

也许这种无耻的扯皮可以帮助你，见http://www.bootply.com/92230

<div class="container">
<h3>Equal Height Example</h3>
<div class="row">
  <div id="equalheight">      

      <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
          <div class="info-block"><!-- BODY BOX-->
              <p>one line of copy</p>
          </div>
      </div>  

      <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
          <div class="info-block"><!-- BODY BOX-->
              <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue</p>
          </div>
      </div>  

      <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
          <div class="info-block"><!-- BODY BOX-->
              <p>one line of copy</p>
          </div>
      </div>  

      <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
          <div class="info-block"><!-- BODY BOX-->
              <p>one line of copy</p>
          </div>
      </div>              

  </div>
 </div>
 <div class="row">
  <div id="equalheight">      

      <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
          <div class="info-block"><!-- BODY BOX-->
              <p>one line of copy</p>
          </div>
      </div>  

      <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
          <div class="info-block"><!-- BODY BOX-->
              <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
              Quisque mauris augue</p>
          </div>
      </div>  

      <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
          <div class="info-block"><!-- BODY BOX-->
              <p>one line of copy</p>
          </div>
      </div>  

      <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
          <div class="info-block"><!-- BODY BOX-->
              <p>one line of copy</p>
          </div>
      </div>              

  </div>

Answer 2

您可以使用这个小jQuery脚本。它测量每个部分的高度，然后使用所有部分的最大高度：

$(document).ready(function() {
   getColHeight();
});

$(window).resize(function() {
    getColHeight();
});

function getColHeight() {
    heightArrayHeading = [];
    $('.footer .footer-menu').each(function() {
        $(this).css('height', '');
        heightArrayHeading.push($(this).outerHeight());
    });
    $('.footer-menu').css('height', Math.max.apply(Math, heightArrayHeading));
}

您并不真正需要此部分，只是出于演示目的而调整浏览器的大小：

$(window).resize(function() {
    getColHeight();
});

Live example

Answer 3

检查link。使用JavaScript，每次重新调整窗口大小时，该示例都会更新容器的高度。

相同高度的div +响应式设计 - bootstrap

3 个答案: