个人中心
gpt4 book ai didi

html - Bootstrap 网格布局中 div 对齐的意外行为

转载 作者：太空宇宙 更新时间：2023-11-04 09:43:33 25 4
gpt4 key购买 nike

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 左右)的高度与高度较大的列的高度相同？

最佳答案

问题是你的cols有不同的高度所以他们停在左边的第一个空闲空间。

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

检查这支笔:

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 大小的新行中 float 。

关于html - Bootstrap 网格布局中 div 对齐的意外行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39680392/

25 4 0
文章推荐： python - PyQt:有没有更好的方法在代码中设置 objectName？
文章推荐： python - 3维空间中点到线的最短距离
文章推荐： python - Pandas 中的 SettingWithCopyWarning
文章推荐： css - "background-positon:center"不适用于 "background-attachement:scroll"
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com