我目前正在尝试让一个 div 调整大小以适应其中的图像。
从图片中您可以看到,没有垂直包含图片。
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
<img class="footer-logo center-hv" src="img/logo/logo-white.svg" alt="logo"/>
</div>
这是我在页脚的其他 div 类中包含的内容:
<div class="col-lg-2 col-md-6 mb-4 mb-lg-0">
<h6 class="text-uppercase font-weight-bold mb-4">Shop</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2"><a href="#" class="text-muted">For Women</a></li>
<li class="mb-2"><a href="#" class="text-muted">For Men</a></li>
<li class="mb-2"><a href="#" class="text-muted">Stores</a></li>
<li class="mb-2"><a href="#" class="text-muted">Our Blog</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6 mb-4 mb-lg-0">
<h6 class="text-uppercase font-weight-bold mb-4">Company</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2"><a href="#" class="text-muted">Login</a></li>
<li class="mb-2"><a href="#" class="text-muted">Register</a></li>
<li class="mb-2"><a href="#" class="text-muted">Wishlist</a></li>
<li class="mb-2"><a href="#" class="text-muted">Our Products</a></li>
</ul>
</div>
列表似乎工作正常,如下所示。
我玩过 with display:block
、overflow:hidden
,但没有取得多大成功。任何帮助,将不胜感激。我正在使用 Bootstrap。
整个页脚:
<footer class="bg-dark-1">
<div class="container py-5 layout-pt-md">
<div class="row py-4">
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
<img class="footer-logo center-hv" src="img/logo/logo-white.svg" alt="logo"/>
</div>
<div class="col-lg-2 col-md-6 mb-4 mb-lg-0">
<h6 class="text-uppercase font-weight-bold mb-4">Shop</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2"><a href="#" class="text-muted">For Women</a></li>
<li class="mb-2"><a href="#" class="text-muted">For Men</a></li>
<li class="mb-2"><a href="#" class="text-muted">Stores</a></li>
<li class="mb-2"><a href="#" class="text-muted">Our Blog</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6 mb-4 mb-lg-0">
<h6 class="text-uppercase font-weight-bold mb-4">Company</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2"><a href="#" class="text-muted">Login</a></li>
<li class="mb-2"><a href="#" class="text-muted">Register</a></li>
<li class="mb-2"><a href="#" class="text-muted">Wishlist</a></li>
<li class="mb-2"><a href="#" class="text-muted">Our Products</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-6 mb-lg-0">
<h6 class="text-uppercase font-weight-bold mb-4">Newsletter</h6>
<p class="text-muted mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At itaque temporibus.</p>
<div class="p-1 rounded border">
<div class="input-group">
<input type="email" placeholder="Enter your email address" aria-describedby="button-addon1" class="form-control border-0 shadow-0">
<div class="input-group-append">
<button id="button-addon1" type="submit" class="btn btn-link"><i class="fa fa-paper-plane"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Copyrights -->
<div class="bg-light py-4">
<div class="container text-center">
<p class="text-muted mb-0 py-2">© 2019 Bootstrapious All rights reserved.</p>
</div>
</div>
</footer>