Bootstrap 5 联系表单没有响应

问题描述 投票：0回答：1

我正在使用 Bootstrap 5 创建一个网站，并用它创建一个联系表单。当您在台式机或笔记本电脑上查看联系表单时，分隔两个部分的白色箭头正确地融合在一起。然而，在手机或平板电脑屏幕上，箭头并不能很好地融合。

桌面视图

手机/平板电脑视图

测试.html

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Contact | </title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<link rel="stylesheet" href="./css/contact.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Default"
    disabled
          href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
        >
        <link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Web Awesome"

          href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
        >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
          >
<link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="../css/contact-form.css">
</head>
<body>
    
    <!-- CONTACT FORM SECTION START -->
    <section class="mb-5">
        <div class="form-area">
            <div class="container">
                <div class="row single-form g-0">
                    <div class="col-sm-12 col-lg-6">
                        <div class="left">
                            <h2><span>Contact Us for</span> <br>Business Inquiries</h2>
                            
                            <div class="mt-5 text-white" id="info" >
                            <i class="fa-solid fa-phone fa-2x ms-2"></i>
                    
                            <p class="ms-2"> </p>
                            </div>
                            <div class="mt-5 text-white" id="info">
                                <i class="fa-solid fa-envelope fa-2x ms-2"></i>
                                <p class="ms-2"></p>
                            </div>
                            <!-- <div class="mt-5 text-white" id="info">
                                <i class="fa-brands fa-facebook fa-2x ms-2"></i>
                                <p class="ms-2"> Solutions</p>
                            </div>
                            <div class="mt-5 text-white" id="info">
                                <i class="fa-brands fa-instagram fa-2x ms-2"></i>
                                <p class="ms-2">@ Solutions</p>
                            </div>
                            <div class="mt-5 text-white" id="info">
                                <i class="fa-brands fa-twitter fa-2x ms-2"></i>
                                <p class="ms-2">@Solut</p>
                            </div> -->
                        </div>
                    </div>
                    <div class="col-sm-12 col-lg-6">
                        <div class="right">
                        <i class="fa fa-caret-left"></i>
                            <form action="" method="POST">
                                <input type="hidden" name="_next" value="https://patriotsforlife.github.io/Bootstrap-/thank-you.html">
                                <input type="hidden" name="_subject" value="New Contact Form Inquiry!">
                                <!-- <input type="hidden" name="_captcha" value="false"> -->
                                <div class="mb-3">
                                    <label for="Name" class="form-label">Full Name</label>
                                    <input type="text" class="form-control" placeholder="Your Full Name" name="name" aria-describedby="emailHelp" required>
                                </div>
                                <div class="mb-3">
                                    <label for="Email" class="form-label">Email Address</label>
                                    <input type="email" class="form-control" placeholder="Your Email Address" name="email" aria-describedby="emailHelp" required>
                                </div>
                                <div class="mb-3">
                                    <label for="Message" class="form-label">Message</label>
                                    <textarea type="text" class="form-control" placeholder="How can we help you?" name="message" required></textarea>
                                </div>
                                
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </form>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- CONTACT FORM SECTION CLOSE -->

    
</body>
</html>

测试.css

.form-area {
    padding-top: 7%;
}
.row.single-form {
    box-shadow: 0 2px 20px -5px hsla(0, 0%, 0%, 0.5);
}
.left {
    background: hsl(210, 45%, 30%);
    padding: 200px 98px;
}
.left h2 {
    font-family: 'Montserrat', sans-serif;
    color: hsl(0, 0%, 100%);
    font-weight: 700;
    font-size: 48px;
}
.left h2 span {
    font-weight: 100;
}
.single-form{
    background: hsl(0, 0%, 100%);
}
.right {
    padding: 70px 100px;
    position: relative;
}
.right i {
    position: absolute;
    font-size: 80px;
    left: -27px;
    top: 40%;
    color: hsl(0, 0%, 100%);
}
.form-control {
    border: 2px solid hsl(0, 0%, 0%);
}
.right button {
    border: none;
    border-radius: 0;
    background: hsl(18, 100%, 62%);
    width: 180px;
    color: #fff;
    padding: 15px 0;
    display: inline-block;
    font-size: 16px;
    margin-top: 20px;
    cursor: pointer;
}
.right button:hover{
    background-color: hsl(18, 100%, 62%);
}


/*responsive*/

@media (min-width:768px) and (max-width:991px){
    .right i {
    top: -52px;
    transform: rotate(90deg);
    left: 50%;
}
}

@media (max-width:767px){
    .left {
  padding: 90px 15px;
  text-align: center;
}
.left h2 {
  font-size: 25px;
}
.right {
  padding: 25px;
}
.right i {
  top: -52px;
  transform: rotate(90deg);
  left: 46%;
}
    .right button {
    width: 150px;
    padding: 12px 0;
}
    
}

#info {
    display: flex;
    vertical-align: middle;
}


.form-area {
    padding-top: 7%;
}
.row.single-form {
    box-shadow: 0 2px 20px -5px hsla(0, 0%, 0%, 0.5);
}
.left {
    background: hsl(210, 45%, 30%);
    padding: 200px 98px;
}
.left h2 {
    font-family: 'Montserrat', sans-serif;
    color: hsl(0, 0%, 100%);
    font-weight: 700;
    font-size: 48px;
}
.left h2 span {
    font-weight: 100;
}
.single-form{
    background: hsl(0, 0%, 100%);
}
.right {
    padding: 70px 100px;
    position: relative;
}
.right i {
    position: absolute;
    font-size: 80px;
    left: -27px;
    top: 40%;
    color: hsl(0, 0%, 100%);
}
.form-control {
    border: 2px solid hsl(0, 0%, 0%);
}
.right button {
    border: none;
    border-radius: 0;
    background: hsl(18, 100%, 62%);
    width: 180px;
    color: #fff;
    padding: 15px 0;
    display: inline-block;
    font-size: 16px;
    margin-top: 20px;
    cursor: pointer;
}
.right button:hover{
    background-color: hsl(18, 100%, 62%);
}


/*responsive*/

@media (min-width:768px) and (max-width:991px){
    .right i {
    top: -52px;
    transform: rotate(90deg);
    left: 50%;
}
}

@media (max-width:767px){
    .left {
  padding: 90px 15px;
  text-align: center;
}
.left h2 {
  font-size: 25px;
}
.right {
  padding: 25px;
}
.right i {
  top: -52px;
  transform: rotate(90deg);
  left: 46%;
}
    .right button {
    width: 150px;
    padding: 12px 0;
}
    
}

#info {
    display: flex;
    vertical-align: middle;
}
<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Contact | </title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<link rel="stylesheet" href="./css/contact.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Default"
    disabled
          href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
        >
        <link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Web Awesome"

          href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
        >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
          >
<link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="../css/contact-form.css">
</head>
<body>
    
    <!-- CONTACT FORM SECTION START -->
    <section class="mb-5">
        <div class="form-area">
            <div class="container">
                <div class="row single-form g-0">
                    <div class="col-sm-12 col-lg-6">
                        <div class="left">
                            <h2><span>Contact Us for</span> <br>Business Inquiries</h2>
                            
                            <div class="mt-5 text-white" id="info" >
                            <i class="fa-solid fa-phone fa-2x ms-2"></i>
                    
                            <p class="ms-2"> </p>
                            </div>
                            <div class="mt-5 text-white" id="info">
                                <i class="fa-solid fa-envelope fa-2x ms-2"></i>
                                <p class="ms-2"></p>
                            </div>
                            <!-- <div class="mt-5 text-white" id="info">
                                <i class="fa-brands fa-facebook fa-2x ms-2"></i>
                                <p class="ms-2"> Solutions</p>
                            </div>
                            <div class="mt-5 text-white" id="info">
                                <i class="fa-brands fa-instagram fa-2x ms-2"></i>
                                <p class="ms-2">@ Solutions</p>
                            </div>
                            <div class="mt-5 text-white" id="info">
                                <i class="fa-brands fa-twitter fa-2x ms-2"></i>
                                <p class="ms-2">@Solut</p>
                            </div> -->
                        </div>
                    </div>
                    <div class="col-sm-12 col-lg-6">
                        <div class="right">
                        <i class="fa fa-caret-left"></i>
                            <form action="" method="POST">
                                <input type="hidden" name="_next" value="https://patriotsforlife.github.io/Bootstrap-/thank-you.html">
                                <input type="hidden" name="_subject" value="New Contact Form Inquiry!">
                                <!-- <input type="hidden" name="_captcha" value="false"> -->
                                <div class="mb-3">
                                    <label for="Name" class="form-label">Full Name</label>
                                    <input type="text" class="form-control" placeholder="Your Full Name" name="name" aria-describedby="emailHelp" required>
                                </div>
                                <div class="mb-3">
                                    <label for="Email" class="form-label">Email Address</label>
                                    <input type="email" class="form-control" placeholder="Your Email Address" name="email" aria-describedby="emailHelp" required>
                                </div>
                                <div class="mb-3">
                                    <label for="Message" class="form-label">Message</label>
                                    <textarea type="text" class="form-control" placeholder="How can we help you?" name="message" required></textarea>
                                </div>
                                
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </form>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- CONTACT FORM SECTION CLOSE -->

    
</body>
</html>

html css responsive-design frontend bootstrap-5
1个回答
0
投票

你尝试过什么吗？当以移动设备查看时，箭头元素有 

top: -52px;
，您只需要稍微调整一下即可。设置 
top: -50px;
使它看起来对我来说是正确的

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.