Bootstrap 表单输入字段看起来很奇怪

Question

我一直在创建一个包含三个选项卡的多步骤表单。我在输入字段的 bootstrap 样式方面遇到问题。

如您所见，输入字段与您在 bootstrap 中得到的不同。当您输入它们时，它会使框变大（显示在站点名称中）。

下面是我试过的代码。并且是可重现的。

这是我的 GitHub 您也可以在其中查看代码。（不是推广，只是为了展示所有的代码）。

.top-bar{

    width:100%;
    height:40px;
    background-color: #006bff;
    padding-bottom: 10px;
}
li{
    display: inline-block;
    padding: 10px;
}
.phone,.logout{
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
}
.phone:hover,.logout:hover{
    color: #F0C330;
    transition:0.5s;
}
body{
    background-color: #A6C7F0!important;
}
.logo{
    padding:20px;
}
.container{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.container form{    
    background-color: #EEF1F4 !important;            /*Change Size of Box*/
    width: 900px;
    padding: 20px;
    margin: 50px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} 
.box{
    width: 800px;
}
.container table {
    background-color: #EEF1F4 !important;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.link-right{
    display: flex;
    justify-content: flex-end;
}
.suggestions{
    width:98.5%;
    height:125px;
    position: relative;
    bottom:17px;
}
.container h1{
    color: #0B2D58;
    text-transform: uppercase;
    font-weight: 500;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="...">
    <title><?= $data['title'] ?? '' ?></title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link href="css/header.css" rel="stylesheet">
  </head>


<body>
    <div class="container">
        <!-- Form Start -->
        <form class="row g-3" id="surveyForm" action="<?= $data['action'] ?>" method="post">

            <!-- One "tab" for each step in the form: -->
            <!-- Tab 1 Start -->
                <h1>Contact & Site Details</h1>
                <!-- Row 1 Start -->
                <div class="row">
                    <div class="col-md-7">
                        <label for="site_name" class="form-label">Site Name*</label>
                        <input type="text" class="form-control" id="site_name" name="site_name"  placeholder="Enter Site Name" oninput="this.className = ''" required><br>
                    </div>

                    <div class="col-md-5">
                        <label for="poNum" class="form-label">PO Number*</label>
                        <input type="text" class="form-control" id="poNum" name="poNum"  placeholder="Enter PO Number" oninput="this.className = ''" required><br>
                    </div>

                    <div class="col-md-5">
                        <label for="customer_name" class="form-label">Contact Name*</label>
                        <input type="text" class="form-control" id="customer_name" name="customer_name"  placeholder="Enter Contact Name" oninput="this.className = ''" required>
                    </div>

                    <div class="col-md-7">
                        <label for="customer_email" class="form-label">Email Address*</label>
                        <input type="email" class="form-control" id="customer_email" name="customer_email"  placeholder="Enter Email" oninput="this.className = ''" required><br>
                    </div>

                    <div class="col-4">
                        <label for="customer_mobile" class="form-label">Contact Number*</label>
                        <input type="tel" class="form-control" id="customer_mobile" name="customer_mobile"  placeholder="Enter Contact Number" oninput="this.className = ''" required> <br>
                    </div>

                    <div class="col-8">
                        <label for="street1" class="form-label">Address*</label>
                        <input type="text" class="form-control" id="street1" name="street1"  placeholder="Address" oninput="this.className = ''" required>
                    </div>

                    <div class="col-md-5">
                        <label for="city" class="form-label">City/Town*</label>
                        <input type="text" class="form-control" id="city" name="city" placeholder="City/Town" oninput="this.className = ''" required>
                    </div>

                    <div class="col-md-5">
                        <label for="county" class="form-label">County*</label>
                        <input type="text" class="form-control" id="county" name="county"  oninput="this.className = ''" placeholder="County">
                    </div>

                    <div class="col-md-2">
                        <label for="postcode" class="form-label">Postcode*</label>
                        <input type="text" class="form-control" id="postcode" name="postcode"  placeholder="Postcode" oninput="this.className = ''" required> <br>
                    </div>
                </div>
                <!-- Row 1 End -->
            
        </form> <!--Form End -->
    </div>
</body>

</html>

Answer 1

出现此问题是因为您正在清除所有字段的输入 bootstrap 类。

oninput="this.className = ''" - 从所有输入中删除它，您的表单将看起来像它应该的样子。

但是，为什么你首先会有那个，objective 是什么？

Bootstrap 表单输入字段看起来很奇怪

Bootstrap Form Input Fields look odd

html

css

bootstrap-4