如何调整头部Logo？请求实现居中及移动端响应式适配

Alright, let's tackle your logo issues—getting it centered and making it responsive for mobile devices. Here's a straightforward solution using Bootstrap (since your code already uses its grid classes) and a bit of custom CSS if needed:

1. Center the Logo #

Your existing grid setup makes this easy. We'll use Bootstrap's flex utility classes to horizontally center the logo container. Add d-flex justify-content-center to the logo-holder div—this will align the logo perfectly in the middle of its parent space.

2. Add Responsive Scaling #

Bootstrap has a built-in img-fluid class that ensures images scale proportionally with their container, preventing overflow on small screens. Add this class to your logo image. If you want to cap the logo's maximum size (so it doesn't get too large on desktop), we can add a quick custom CSS rule.

Modified Full Code #

<div class="main-header" style="background: #484747">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 logo-holder d-flex justify-content-center">
        <div class="logo">
          <a href="index.php">
            <img src="img/logo.png" alt="elevensixnine clothing" class="img-fluid"/>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Optional Custom CSS (add this in your stylesheet or a <style> tag) -->
<style>
.logo img {
  max-width: 200px; /* Adjust this to set your preferred maximum logo size */
  height: auto;
}

/* Optional: Fine-tune for mobile */
@media (max-width: 576px) {
  .logo img {
    max-width: 150px; /* Smaller size specifically for mobile screens */
  }
}
</style>

Quick Breakdown: #

• d-flex justify-content-center: Uses flexbox to horizontally center the logo without messy margin hacks.
• img-fluid: Makes the logo shrink proportionally on mobile, so it never spills outside its container.
• The custom CSS lets you control the logo's upper size limit, and the media query lets you tweak it even further for smaller devices if needed.

内容的提问来源于stack exchange，提问作者fam29