如何实现响应式表单？Bootstrap表单及导航栏折叠故障求助

Hey there! Let's fix those Bootstrap responsive issues step by step. I've gone through your code and spotted several key problems that are causing the responsiveness and navbar toggle to fail. Here's the breakdown and fixed solution:

1. Critical Viewport Meta Tag Typo #

Your viewport tag had a missing hyphen (initial scale=1 instead of initial-scale=1), which completely breaks Bootstrap's responsive behavior. Fixed version:

<meta name="viewport" content="width=device-width, initial-scale=1">

2. Missing Navbar Collapse Structure #

You didn't include Bootstrap's required collapse components for mobile navigation. I added the .navbar-toggle button and wrapped collapsible nav content in .collapse.navbar-collapse so the toggle works as expected.

3. Invalid Nested Forms #

HTML doesn't allow nested <form> elements— I removed the duplicate form tag that was wrapping your panel.

4. CSS Syntax Errors #

• Fixed font-weight: 700px (font-weight uses numeric values without px units)
• Removed a stray closing } at the end of your custom CSS
• Corrected invalid face: Calibri to proper font-family: Calibri, sans-serif;

5. Incomplete Panel Structure #

Your panel was missing a proper .panel-heading (likely the cause of your display issues), and the close button had data-dismiss="modal" even though this isn't a modal. I adjusted that to a simple link.

Fixed Full Code #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Theme CSS -->
    <link href="css/style.css" rel="stylesheet">
    <!-- Favicon -->
    <link rel="shortcut icon" href="img/favicon.ico">
    <style>
        label {
            display: inline-block;
            margin-bottom: 5px;
            font-weight: 400;
            font-family: Calibri, sans-serif;
        }
        .panel-footer {
            padding: 20px 20px;
            margin-bottom: 10px;
            background-color: #fff;
            border-top: 0px solid #ddd;
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 0px;
            height: 80px !important;
        }
        .close {
            float: right;
            font-size: 31px;
            margin-left: 22px;
            color: black;
        }
        button.close {
            padding: 1;
            padding-top: 1px;
            padding-right: 5px;
            font-weight: 700;
            background-color: black;
        }
        .underline {
            text-decoration: underline;
        }
        .form-control{
            border-color: blue;
        }
        .panel-default {
            border-color: black;
        }
    </style>
    <!-- jQuery is required for Bootstrap collapse to work! -->
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <a href="#" class="navbar-brand">
                <img src="logo1.jpg" height="48" width="202" class="pull-left">
            </a>
            <!-- Mobile Nav Toggle Button -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- Collapsible Nav Content -->
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <center>
                    <p class="navbar-text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Ticker </a></p>
                </center>
                <p class="navbar-text pull-left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=""></a></p>
                <p class="navbar-text pull-right"><a href="#">Logout</a></p>
            </div>
        </div>
    </div>

    <br/><br/><br/><br/><br />

    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-6">
                <h4 id="main" style='color: #4CAEE3'><a href="ht.html">HT</a> /<a href="createemployee.html">Create </a></h4><br />
            </div>
        </div>
        <br />

        <form class="form-horizontal" id="myform">
            <h4><center><a href="createem.html"><font style="color: #0000ff;font-weight: 700; font-family: Calibri;">New </font></a></center></h4>
            
            <div class="panel panel-default">
                <div class="panel-heading">
                    <!-- Adjusted Close Link -->
                    <a href="hrtoolkit.html" class="close">
                        <span class="underline" id="u">&times;</span>
                    </a>
                </div>
                <div class="form-body">
                    <br />
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-4">
                                <div class="row">
                                    <div class="form-group">
                                        <label class="control-label col-md-4"> ID<span style="color: red;">*</span></label>
                                        <div class="col-md-7">
                                            <input type="text" class="form-control" id="emp" required placeholder="if" oninvalid="this.setCustomValidity('ID Required')" oninput="this.setCustomValidity('')" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <label class="control-label col-md-4">First Name<span style="color: red;">*</span> </label>
                                        <div class="col-md-7">
                                            <input type="text" class="form-control" id="fname" required placeholder="First Name" oninvalid="this.setCustomValidity('First Name Required')" oninput="this.setCustomValidity('')" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <label class="control-label col-md-4">Gender<span style="color: red;">*</span> </label>
                                        <div class="col-md-7">
                                            <select class="form-control" required oninvalid="this.setCustomValidity('Gender Required')" oninput="this.setCustomValidity('')">
                                                <option hidden value="">Gender</option>
                                                <option value="male">Male</option>
                                                <option value="female">Female</option>
                                                <option value="other">Other</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <label class="control-label col-md-4">DOJ<span style="color: red;">*</span></label>
                                        <div class="col-md-7">
                                            <input type="date" class="form-control" id="doj" required oninvalid="this.setCustomValidity('Date of Joining Required')" oninput="this.setCustomValidity('')" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer">
                    <button type="submit" class="btn btn-primary">Submit</button>
                    <button type="reset" class="btn btn-default">Reset</button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

Quick Additional Notes #

• jQuery Dependency: Bootstrap's collapse plugin won't work without jQuery— I added it before the Bootstrap JS file, which is mandatory.
• Panel Display: The new .panel-heading fixes the abnormal panel display you mentioned.
• Form Validation: I cleaned up the select element (you had a self-closing <select/> which is invalid) while keeping your custom validation logic intact.
• Responsive Behavior: The form now properly uses Bootstrap's grid system, so it will stack neatly on mobile devices.

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