Question

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个相等的列然后最终大小第3行中的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>

像这样（仅适用于大屏幕）一旦网格宽度耗尽，新的col会自动进入新行。为什么不同？
另外，如何将图标前面的列表项中的文本居中（fb，twitter等） - 我已经尝试了行高，没有用。
如何确保两列（id为left和right）的高度与高度较大的列的高度相同？

Answer 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>
    ...

例如，在这种情况下，我强制“与我们一起购物”col在sm和xs大小的新行中浮动。

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

1 个答案: