引导网格布局中 div 对齐的意外行为答案

【问题标题】：Unexpected behavior in div alignment in bootstrap grid layout引导网格布局中 div 对齐的意外行为
【发布时间】：2016-09-24 19:55:46
【问题描述】：

http://codepen.io/utkarshmttl/full/BLWJVL/

    <html>
  <head>
    <title>Footer</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-5 col-sm-5 col-xs-12" id="left">
          <img src="" alt="Lithics logo" style="margin-bottom:25px">
          <p style="margin-bottom:25px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatt, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.</p>
          <h2 style="margin-bottom:25px">Payment Method</h2>
          <p style="margin-bottom:25px"> We are using secure Paypal & Money-bookers payment method. You can pay directly form your Credit Card via Moneybookers or Paypal and NEVER store your card information on our site </p>
         <ul class="payment-item">
<li class="item"><a href=""><img src="http://demo.magentech.com/themes/sm_love_fashion/media/wysiwyg/we-pay-icon.png" alt="Payment"></a></li>
<li class="item"><a href=""><img src="http://demo.magentech.com/themes/sm_love_fashion/media/wysiwyg/master-cart-icon.png" alt="Payment"></a></li>
<li class="item"><a href=""><img src="http://demo.magentech.com/themes/sm_love_fashion/media/wysiwyg/a-icon.png" alt="Payment"></a></li>
<li class="item"><a href=""><img src="http://demo.magentech.com/themes/sm_love_fashion/media/wysiwyg/paypal-icon.png" alt="Payment"></a></li>
<li class="item"><a href=""><img src="http://demo.magentech.com/themes/sm_love_fashion/media/wysiwyg/visa-icon.png" alt="Payment"></a></li>
</ul> 
        </div>
        <div class="col-md-7 col-sm-7 col-xs-12" id="right">
          <div class="row">
            <div class="col-lg-4 col-md-4 col-xs-6 block-ft">
              <h2>Connect with Us</h2>

    <ul class="fa-ul">
      <li class="custom-list-item"><a title="Follow us on youtube" href="#"><i class="fa fa-youtube-square fa-2x"></i>&nbsp &nbsp Follow us on youtube</a></li>
    <li class="custom-list-item"><a title="Follow us on facebook" href="#"><i class="fa fa-facebook-square fa-2x"></i>&nbsp &nbsp Follow us on facebook</a></li>
      <li class="custom-list-item"><a title="Follow us on twitter" href="#"><i class="fa fa-twitter-square fa-2x"></i>&nbsp &nbsp Follow us on twitter</a></li>
      <li class="custom-list-item"><a title="Follow us on google plus" href="#"><i class="fa fa-google-plus-square fa-2x"></i>&nbsp &nbsp Follow us on google plus</a></li>
              </ul>
            </div>
            <div class="col-lg-4 col-md-4 col-xs-6 block-ft">
              <h2>About Us</h2>

    <ul class="fa-ul">
      <li class="custom-list-item"><a title="About Us" href="#">About Us</a></li>
      <li class="custom-list-item"><a title="Contact Us" href="#">Contact Us</a></li>
      <li class="custom-list-item"><a title="Customer Service" href="#">Customer Service</a></li>
      <li class="custom-list-item"><a title="Partners" href="#">Partners</a></li>
      <li class="custom-list-item"><a title="Careers" href="#">Careers</a></li>
              </ul>
            </div>
            <div class="col-lg-4 col-md-4 col-xs-6 block-ft">
              <h2>Shopping with Us</h2>

    <ul class="fa-ul">
      <li class="custom-list-item"><a title="Privacy Policy" href="#">Privacy Policy</a></li>
      <li class="custom-list-item"><a title="Refund Policy" href="#">Refund Policy</a></li>
      <li class="custom-list-item"><a title="Terms of Use" href="#">Terms of Use</a></li>
      <li class="custom-list-item"><a title="FAQ" href="#">FAQ</a></li>
              </ul>
            </div>
            <div class="col-lg-4 col-md-4 col-xs-6 block-ft">
              <h2>Your Account</h2>

    <ul class="fa-ul">
      <li class="custom-list-item"><a title="Your Account" href="#">Your Account</a></li>
      <li class="custom-list-item"><a title="Personal Info" href="#">Personal Info</a></li>
      <li class="custom-list-item"><a title="Search Terms" href="#">Search Terms</a></li>
      <li class="custom-list-item"><a title="Advanced Search" href="#">Advanced Search</a></li>
      <li class="custom-list-item"><a title="Order History" href="#">Order History</a></li>
              </ul>
            </div>
            <div class="col-lg-8 col-md-8 col-xs-6 block-ft">
              <h2>Contact Us</h2>

    <ul class="fa-ul">
      <li class="custom-list-item"><i class="fa fa-plus-square fa-2x"></i>&nbsp &nbsp Address : No 40 Baria Sreet 133/2 NewYork City, NY, United States</li>
      <li class="custom-list-item"><i class="fa fa-envelope-square fa-2x"></i>&nbsp &nbsp Email : support@lithics.in</li>
      <li class="custom-list-item"><i class="fa fa-phone-square fa-2x"></i>&nbsp &nbsp Phone : 0123456789</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

上述笔的样式表：

h2{
  font-size:29px;
}
.row{
  color:#FFF;
}
#left{
  background: url('http://demo.magentech.com/themes/sm_love_fashion/skin/frontend/sm_lovefashion/default/images/bg-big-footer.png');
  padding: 30px 15px 20px 15px;
}
.payment-item{
  padding:0px;
}
.payment-item .item{
    display:inline-block;
    margin-right:8px;
}
.payment-item .item img{
    opacity:0.7;
    filter:alpha(opacity = 70);
}
.payment-item .item img:hover{
    opacity:1;
    filter:alpha(opacity = 100);
}
#right{
  background:#272727;
  padding: 30px 15px 20px 15px;
}
.block-ft{
  margin-bottom:35px;
}
.fa-ul{
  margin-left:0px;
}
.custom-list-item{
  opacity:0.7;
    filter:alpha(opacity = 70);
  margin-bottom:10px;
}
.custom-list-item:hover{
    opacity:1;
    filter:alpha(opacity = 100);
}
a,a:hover{
  color:#ffffff;
  text-decoration:none;
}

在这里，“您的帐户”div 自动右对齐，这是为什么呢？我想要的是：对于大型设备 - 3 个相等的列，然后在下一行中，一列大小为 4，另一列大小为 8。对于小型/中型设备 - 2 个相等的列，然后在下一行中再次 2 个相等的列，然后最后大小第三行 6 列。
http://codepen.io/utkarshmttl/pen/qaAoJx,

<div class="container-fluid">
  <div class="row">
  <div class="col-lg-4" style="background-color:red">wrfrwf
  </div>
    <div class="col-lg-4"  style="background-color:green">fgsfgsf
  </div>
    <div class="col-lg-4"  style="background-color:red">hjlhjl
  </div>
    <div class="col-lg-4"  style="background-color:green">jlkjkl
  </div>
    <div class="col-lg-8"  style="background-color:yellow">jhjhuh
  </div>
  </div>
</div>

像这样（仅对大屏幕实现）一旦网格宽度用尽，新的列会自动进入新行。为什么有区别？
另外，如何在图标（fb、twitter 等）前面的列表项中将文本居中 - 我试过行高，但没有用。
以及如何确保两列（id左右）的高度与高度较大的列的高度相同？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

问题是您的 cols 具有不同的高度，因此它们停在左侧的第一个可用空间中。

您可以使用块之间的一些空行强制正确对齐。

检查这支笔：

http://codepen.io/anon/pen/GjWdKa

        <div class="row visible-sm visible-xs"></div>
        <div class="col-lg-4 col-md-4 col-xs-6 block-ft">
          <h2>Shopping with Us</h2>
    ...

例如，在这种情况下，我强制 'Shopping with Us' col 浮动在 sm 和 xs 大小的新行中。

【讨论】：

谢谢，如果你能提供帮助，我又添加了几个问题。
对于对齐同一 div 中的两个元素，您可以应用 line-height 和 vertical align：codepen.io/sassoli/pen/EgWLXp 其他方法包裹在表格单元中，或者如果您不需要支持旧浏览器使用 flexbox .如果您以前不知道内容的高度，那么对于强制相同的高度到 col 块，您无法使用纯 css 来执行此操作。通常我使用 jquery 插件：brm.io/jquery-match-height
我使用了上述插件，但还是不行。我给了我的列（分别为左和右），一类“itemcol”，然后调用匹配高度函数但没有效果。 codepen.io/utkarshmttl/pen/BLWJVL