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

Question

我有一个页脚， Bootstrap 中有 4 列。我希望每个 div 的高度相同。有什么办法吗？

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

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

也许这个无耻的 bootply 撕裂可以帮助您，请参阅 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>