如何将现有HTML页面改造为适配多终端的响应式页面？

算力阿峰

2026-5-28

Fixing Bootstrap Responsive Issues for Your College Website

Hey there! It’s super common for new devs to run into layout chaos when mixing custom CSS with Bootstrap—let’s break down what’s going wrong and fix this step by step.

Key Issues Causing the Mess

CSS Load Order: You’re loading your custom style.css before Bootstrap. Since Bootstrap’s styles come after, they’re overriding your custom rules (and vice versa for things you want to keep), leading to unexpected layout shifts.
Fixed Widths: Almost all your containers (.main, .header, .navbar, etc.) have fixed pixel widths like 935px—this breaks responsiveness because they can’t shrink/grow with different screen sizes.
Custom Navbar Conflict: Your hand-coded navbar uses absolute positioning and fixed widths, which clashes with Bootstrap’s default layout rules, especially on mobile.
Typos & Redundant CSS: Small errors (like bacground-color instead of background-color) and duplicate styles are adding unnecessary bloat and potential bugs.

Step-by-Step Fixes

1. Fix CSS Load Order

Always load Bootstrap first, then your custom CSS. This lets your styles override Bootstrap’s defaults when needed:

<!-- First Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Then your custom CSS -->
<link rel="stylesheet" type="text/css" href="style.css">

2. Replace Fixed Widths with Bootstrap Grid

Bootstrap’s grid system (container, row, col-*) handles responsiveness out of the box. We’ll rewrite your header and main layout to use it:

Use container instead of .main for a responsive centered container.
Split the header into columns with col-md-4 (for logos) and col-md-4 (for text) to stack on mobile.

3. Switch to Bootstrap’s Responsive Navbar

Your custom dropdown won’t work well on mobile. Bootstrap’s navbar includes a built-in collapse button for small screens. We’ll replace your navbar with this component.

4. Clean Up Custom CSS

Remove fixed widths, fix typos, and simplify redundant styles. We’ll keep only the custom styles that add your brand’s look (like colors, fonts) without breaking Bootstrap.

Modified Working Code

Updated HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Load Bootstrap FIRST -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Then custom CSS -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container main-container">
        <!-- Header Section -->
        <div class="header row">
            <div class="col-md-4 text-center">
                <img src="images/logo1.jpg" alt="College Logo 1" height="100" width="100" class="logo1">
            </div>
            <div class="col-md-4 text-center">
                <div class="text1">
                    <strong>AGNIHOTRI COLLEGE OF ENGINEERING,<br>WARDHA</strong>
                    <br>
                    <div class="sub-text">
                        (Near Bypass Highway,Nagthana Road Sindi(Meghe))<br>
                        Email:ace@agnihotri.org <br>
                        Phone:07152-250152
                    </div>
                </div>
            </div>
            <div class="col-md-4 text-center">
                <img src="images/12.png" alt="College Logo 2" height="100" width="100" class="logo2">
            </div>
        </div>

        <!-- Bootstrap Responsive Navbar -->
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Mobile Toggle Button -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <!-- Nav Links & Dropdown -->
                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="governance.html">Governance</a></li>
                        <li><a href="campus.html">Campus</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Department <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Basic Science</a></li>
                                <li><a href="#">Machanical Engineering</a></li>
                                <li><a href="#">Civil Engineering</a></li>
                                <li><a href="comp.html">Computer science & Engineering</a></li>
                                <li><a href="#">Electronic</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- Add your middle content (left/right wrappers) here using Bootstrap grid -->
        <div class="row mid-wrapper">
            <div class="col-md-4 left-wrapper">
                <!-- Left content (video, links) -->
                <div id="video">
                    <!-- Your video content here -->
                </div>
            </div>
            <div class="col-md-8 right-wrapper">
                <!-- Right content -->
            </div>
        </div>

        <!-- Footer -->
        <div class="footer row text-center">
            <div class="footer-inner">
                <a href="#" class="footer-link">Link 1</a>
                <a href="#" class="footer-link">Link 2</a>
                <a href="#" class="footer-link">Link 3</a>
            </div>
        </div>
    </div>

    <!-- Add Bootstrap JS (required for dropdown/toggle) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Updated Custom CSS (`style.css`)

/* Base Styles */
body {
    background-color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.main-container {
    background-color: white;
    padding: 0;
}

/* Header Styles */
.header {
    padding: 65px 0 0;
    background-color: white;
}

.text1 {
    font-size: 20px;
    color: brown;
}

.sub-text {
    font-size: 12px;
    color: brown;
    margin-top: 10px;
}

.logo1, .logo2 {
    display: inline-block;
}

/* Navbar Customization */
.navbar-default {
    background-color: gray;
    border: none;
    border-radius: 0;
}

.navbar-default .navbar-nav > li > a {
    color: white;
    font-weight: bold;
    border-left: 1px solid black;
    line-height: 30px;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li:hover {
    background-color: black;
}

.navbar-default .navbar-nav .dropdown-menu {
    background-color: gray;
    border: 1px solid black;
    width: 100%;
    left: 0;
}

.navbar-default .navbar-nav .dropdown-menu > li > a {
    color: white;
}

.navbar-default .navbar-nav .dropdown-menu > li > a:hover {
    background-color: black;
    color: white;
}

/* Content Styles */
.mid-wrapper {
    background-color: white;
}

.left-wrapper {
    padding: 14px 0 12px;
}

#video {
    padding: 1px 0 10px 15px;
    color: #fff;
}

.link, .link:hover {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    text-align: right;
}

.link2, .link2:hover {
    font-size: 12px;
    font-weight: bold;
    color: #bc4105;
    text-decoration: none;
    text-align: right;
}

.right-wrapper {
    padding: 15px 0 0 25px;
}

/* Footer Styles */
.footer {
    color: #999;
    padding: 10px 0;
}

.footer-link, .footer-link:hover {
    color: #999;
    text-decoration: none;
    padding: 0 5px;
}

Why This Works

Responsive Grid: Bootstrap’s col-md-* classes will stack columns vertically on screens smaller than 992px (tablets/mobile), automatically adapting the layout.
Mobile-First Navbar: The toggle button appears on small screens, turning the horizontal menu into a collapsible dropdown.
Clean CSS: We removed fixed widths, fixed typos, and only kept styles that customize Bootstrap’s defaults (like your gray navbar, brown text) instead of fighting against them.
Proper Dependencies: We added Bootstrap’s JS and jQuery, which are required for interactive components like dropdowns and the mobile menu toggle.

Just swap in your actual content for the placeholder sections (video, right wrapper) and test on different screen sizes—this should give you a fully responsive layout without the chaos!

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

如何将现有HTML页面改造为适配多终端的响应式页面？

Key Issues Causing the Mess #

Step-by-Step Fixes #