Bootstrap Footer列对齐异常求助：使用col-sm-3未达预期效果

Let's get your footer columns aligned properly—there are a few small issues in your code throwing off the Bootstrap grid layout.

Key Problems Identified #

• Broken HTML Structure: You have an extra nested <div class="footer"> inside your first col-sm-3, which breaks the Bootstrap grid hierarchy. Plus, several tags are incorrectly closed (like <a/> instead of </a>) and some <h6> tags are left unclosed.
• CSS Selector Mistakes: Your link hover/link state selector is written incorrectly (order matters in CSS, and the syntax is off), and applying the .footer class multiple times adds unintended margins.

Corrected Code #

Updated CSS

.footer { 
  margin-top: 100px; 
  margin-bottom: 100px; 
  background-color: #34495e; 
  padding: 2rem 0; /* Add padding to give inner content space */
}
.footer-title {
  color: #ffffff;
  font-family: 'Open sans', sans-serif;
  margin-bottom: 1rem; /* Space between title and list */
}
.footer ul {
  list-style: none;
  padding-left: 0; /* Remove default ul padding */
}
.footer ul li {
  margin-bottom: 0.5rem; /* Space between list items */
}
.footer a {
  color: #ccc; /* Default link color */
  text-decoration: none;
}
.footer a:hover {
  color: #fff; /* Hover state color */
}

Updated HTML

<!doctype html>
<html lang="en">
<head>
<title>Home </title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="img/favicon_head.ico" />
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--NAVIGATION-->
<div class="container-bg-signup">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="signup text-center">
          <h4>JOIN OUR MAILING LIST!</h4>
          <div class="input-group justify-content-center">
            <input type="email" id="myEmail" placeholder="enter your email"> <!-- Changed value to placeholder for better UX -->
            <button onclick="myFunction()" class="btn btn-light-orange btn-sign">SUBSCRIBE</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<footer class="container-fluid footer">
  <div class="container"> <!-- Added container to constrain content width -->
    <div class="row">
      <div class="col-sm-3">
        <div id="cat-1">
          <h6 class="footer-title">About</h6> <!-- Fixed unclosed h6 -->
          <ul>
            <li><a href="###">About Company</a></li> <!-- Fixed link structure (li wraps a, not vice versa) -->
            <li><a href="###">Vision & Mission</a></li>
            <li><a href="###">Partners</a></li>
            <li><a href="###">Policy</a></li>
          </ul>
        </div>
      </div>
      <div class="col-sm-3">
        <div id="cat-2">
          <h6 class="footer-title">Useful Links</h6>
          <ul>
            <li><a href="###">Help</a></li>
            <li><a href="###">Testimonials</a></li>
            <li><a href="###">Store Location</a></li>
            <li><a href="###">Trade Account</a></li>
            <li><a href="###">Site Map</a></li>
          </ul>
        </div>
      </div>
      <div class="col-sm-3">
        <div id="cat-3">
          <h6 class="footer-title">Customers</h6>
          <ul>
            <li><a href="###">Our Prices</a></li>
            <li><a href="###">Returns</a></li>
            <li><a href="###">Sizes</a></li>
            <li><a href="###">Register</a></li>
          </ul>
        </div>
      </div>
      <div class="col-sm-3">
        <div id="cat-4">
          <h6 class="footer-title">Documentation</h6>
          <ul>
            <li><a href="###">RISQS Certificate</a></li>
            <li><a href="###">Insurance</a></li>
            <li><a href="###">Library</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.5/js/mdb.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

What Changed? #

1. Fixed HTML Structure: Removed the extra nested .footer div, corrected tag closures, and restructured links to wrap inside <li> elements (proper semantic HTML).
2. Added Container to Footer: Wrapped the footer row in a .container to align content with the rest of your site (matches your mailing list section's layout).
3. Improved CSS: Fixed link state order, added padding/spacing for better visual hierarchy, removed default list styling, and cleaned up redundant classes.
4. UX Tweaks: Changed the email input's value to placeholder for better usability.

This should give you the evenly spaced 4-column footer you're aiming for, matching your reference design.

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