Div 调整大小以适合子图像尺寸

时间:2021-04-22 10:36:38

标签: html twitter-bootstrap

我目前正在尝试让一个 div 调整大小以适应其中的图像。

enter image description here

从图片中您可以看到,没有垂直包含图片。

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

列表似乎工作正常,如下所示。

enter image description here

我玩过 with display:blockoverflow: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>

0 个答案:

没有答案