html - 响应式登录/注册/信息/关于页面未正确调整大小

问题描述

我正在尝试使用 bootstrap 4.5 创建登录/注册页面我不是开发人员，并且观看了一些 YouTube 视频以了解事情。我想让这个页面响应，因为引导程序首先是移动的。不幸的是，我在课堂上迷路了，我读的越多，我迷路的越多。到目前为止，我已经在两周内以某种方式进行了制作，我不知道如何制作页面。在我看来它看起来不错。最初的想法来自https://codepen.io/microsarme6943/pen/LbNNrN我无法让它响应。然后遇到了https://codepen.io/cassandraPaige/pen/ZEYmMJg，因为它与另一个类似，但没有媒体查询。我的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.css" integrity="sha512-f73UKwzP1Oia45eqHpHwzJtFLpvULbhVpEJfaWczo/ZCV5NWSnK4vLDnjTaMps28ocZ05RbI83k2RlQH92zy7A==" crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style9.css">
<title>Login</title>
</head>
<body>

    <div class="container-fluid min-vh-100 d-flex flex-column">
        
        <div class="row flex-grow-1">
            <div class="col-md-2 border">
                 
                <div class="p-1 my-flex-items">
                    <ul>
                        <li><img class="logo" src="logo1.png"/></li>
                        <li class="move1"><a class="login" href="#"><i class="fas fa-user-check"></i> Login</a></li>
                        <li class="move2"><a class="reg" href="#"><i class="fas fa-user-plus"></i> Sign Up</a></li>
                        <li class="move3"><a class="about" href="#"><i class="fas fa-info"></i> About</a></li>
                        <li class="move4"><a class="faq" href="#"><i class="fas fa-question"></i> FAQ</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-10 border">
                 
                <div class="d-flex flex-column flex-md-column align-items-start align-items-md-start my-welcome">
                    <h3 class="heading p-2 align-items-stretch" >Welcome To Your Account</h3>
                    <span class="p-2">BUSINESS NAME SOMETHING<br>Log-in using your credentials</span><br>
                    <span class="p-2">To learn more about services<br> Please visit out website <a href="https://www.abc.123" target="blank"><i class="fas fa-external-link-alt"></i></a></span>
                </div>
                <div class="d-flex flex-row justify-content-start my-social">
                    <div class="btn fb">
                        <a href="https://www.facebook.com" target="blank"><i class="fab fa-facebook-f"></i></a>
                    </div>
                    <div class="btn ln">
                        <a href="https://www.linkedin.com" target="blank"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                    <div class="btn tw">
                        <a href="https://www.twitter.com" target="blank"><i class="fab fa-twitter"></i></a>
                    </div>
                    <div class="btn in">
                        <a href="https://www.instagram.com" target="blank"><i class="fab fa-instagram"></i></a>
                    </div>
                    <div class="btn te">
                        <a href="https://www.telegram.org" target="blank"><i class="fab fa-telegram-plane"></i></a>
                    </div>
                </div>
                <div class="container my-login">
                    <div class="login">
                        <p><span>Login</span> to your account to see what <br>We have for you.</p><br>
                        <form action="">
                            <div class="form-group">
                                <label for="Please select">Select an option</label>
                                <select name="Please select" id="selection" class="form-control">
                                    <option value="Company">Company</option>
                                    <option value="Individual" disabled>Individual</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="company">Company id</label>
                                <input type="text" name="company" id="company" class="form-control">
                                <small class="form-text text-muted">
                                    A unique company id which we provided you.
                                </small>
                            </div>
                            <div class="form-group">
                                <label for="username">Username</label>
                                <input type="text" name="username" id="username" class="form-control">
                                <small class="form-text text-muted">
                                    Type your username.
                                </small>
                            </div>
                            <div class="form-group">
                                <label for="password">Password</label>
                                <input type="password" name="password" id="password" class="form-control">
                                <small class="form-text text-muted">
                                    Type your password. Passowrd is case sentive.
                                </small>
                            </div>
                            <div class="form-check">
                                <input type="checkbox" id="rememberme" class="form-check-input">
                                <label for="checkbox" class="form-check-label">Remember me</label> 
                            </div>
                            <button><i class="fas fa-lock-open"></i></button>
                            <p>Forgot Your Password?<span><a class="sign-up" href="#" > Request reset password</a></span></p>
                            <p>Dont't Have An Account?<span><a class="reg" href="#" > Sign up</a></span></p>
                        </form>
                    </div>
                </div>
                <div class="container my-signup">
                    <div class="reg">
                        <p><span>Register</span> Fill in the form below <br>To get started.</p><br>
                        <form action="">
                            <div class="form-group">
                                <label for="Please select">Account Type</label>
                                <select name="Please select" id="selection" class="form-control">
                                    <option value="Company">Company</option>
                                    <option value="Individual" disabled>Individual</option>
                                </select>
                                <small class="form-text">
                                    Select appropriate account type from the list.
                                </small>
                            </div>
                            <div class="form-group">
                                <label for="company">Company Name</label>
                                <input type="text" name="company" id="company" class="form-control">
                                <small class="form-text">
                                    Your company name as it appears on companies house documents.
                                </small>
                            </div>
                            <div class="form-group">
                                <label for="contactname">Contact Person's Name</label>
                                <input type="text" name="contactname" id="contactname" class="form-control">
                                <small class="form-text">
                                    Point of contact or person dealing with this account in your office.
                                </small>
                            </div>
                            <div class="form-group">
                                <label for="email">Your Company Email</label>
                                <input type="email" name="email" id="email" class="form-control">
                                <small class="form-text">
                                    Your official company email address. Free email providers are not accepted.
                                </small>
                            </div>
                            <div class="form-group">
                                <label for="address">Address</label>
                                <input type="text" name="address" id="address" class="form-control">
                                <small class="form-text">
                                    Your office address including post code.
                                </small>
                            </div>
                            <div class="form-group">
                                <label for="username">Username</label>
                                <input type="text" name="username" id="username" class="form-control">
                                <small class="form-text">
                                    Your desired username.
                                </small>
                            </div>
                            <div class="form-group">
                                <label for="password">Password</label>
                                <input type="password" name="password" id="password" class="form-control">
                                <small class="form-text">
                                    Password must be at least 8 character mix of letters & number. 
                                </small>
                            </div>
                            <div class="form-group">
                                <label for="password">Re-type Password</label>
                                <input type="password" name="password" id="password" class="form-control">
                                <small class="form-text">
                                    Re-type your type. It must match the password you set above.
                                </small>
                            </div>
                            <div class="form-check">                        
                                <input type="checkbox" id="rememberme" class="form-check-input">
                                <label for="checkbox" class="form-check-label">I / We Agree with terms &amp conditions.</label>                        
                            </div>
                            <button><i class="far fa-plus-square"></i></i></button>
                            <p>Already Have An account?<span class="login"><a href="#"> Log in</a></span></p>
                        </form>
                    </div>
                </div>
                <div class="container my-info">            
                    <ul> 
                        <p>Below is an overview of vast services which our clients can benifit from.<br></p>        
                            <li class="1"><p>Some bullet point one goes here.</p></li>
                            <li class="2"><p>Some bullet point two goes here.</p</li>
                            <li class="3"><p>Some bullet point three goes here.</p</li>
                            <li class="4"><p>Some bullet point four goes here.</p</li>
                        <p>To learn in detail about our services &amp how we can help you progress visit our main website <a href="https://www.abc.123" target="blank"><i class="fas fa-external-link-alt"></i></a></p>         
                    </ul>                
                </div>
                <div class="container my-about">
                    <p> We are something something and we offer lots of something something to companies and indivusuals alike. <br>With our experience we have designed our services to match your every need and requirement.<br> You can contact us by filling the online contact us form on our website <a href="https://www.abc.123" target="blank"><i class="fas fa-external-link-alt"></i></a> for a tailored experience where we will measure you and something something and give you the best possible quote. We offer fully coustimesed solution based on your business model to satisfy your exact needs. Get in touch today for a detailed discussion.</p>               
                </div>
                <div class="row footer text-center my-footer">
                    <div class="col footer-row">
                        <i class="fas fa-copyright"><span class="copyright"> Copyright text something something. All right reserved something something. From year something something.</i><span>
                    </div>
                </div>
                
            </div>
            </div>
        </div>                     
               
    </div>


          
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" integrity="sha512-jGsMH83oKe9asCpkOVkBnUrDDTp8wl+adkB2D+//JtlxO4SrLoJdhbOysIFQJloQFD+C4Fl1rMsQZF76JjV0eQ==" crossorigin="anonymous"></script>
<script type='text/javascript' src="app4.js"></script>
</body>
</html>

和 CSS 是：

*{
    margin: 0px;
    padding: 0;
    box-sizing: border-box;
}
.my-flex-items ul{
    margin: 0px;
    padding: 0px;
    text-align: center;
}
.my-flex-items ul li{    
    justify-content: space-around;
    list-style: none;
    background-color: white;    
    align-items: center;
    list-style: none;
    padding: 30px 25px;
}
.my-flex-items li a{    
    font-size: 20px;
    color: black;    
    text-align: left;  
    text-decoration: none;
}
.my-welcome{    
    top: 0; 
    transition: all ease-in .5s;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(0, 0, 0);
    color: white;
}
.my-welcome .fas{
    color: crimson;    
}
.my-welcome a{
    color: white;
}
.my-social{
    background-color: rgb(0, 0, 0);
    color: white;
}
.my-social a{
    color: white;
}
.my-login{
    background-color: rgb(224, 224, 224);
}
.my-login input{        
    padding:7px 15px;       
}
.my-login input:focus{
    border-color: crimson;    
    box-shadow: none;
}
.my-login button{     
    border-radius: 50%;
    height: 50px;
    width: 50px;
    background-color: crimson;
    color: white;
    outline: none;
    border: 0px;
    display: block;
    margin: 35px auto ;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);      
}
.my-signup{
    background-color: rgb(224, 224, 224);
}
.my-signup input:focus{
    border-color: crimson;    
    box-shadow: none;
}
.my-signup button{     
    border-radius: 50%;
    height: 50px;
    width: 50px;
    background-color: crimson;
    color: white;
    outline: none;
    border: 0px;
    display: block;
    margin: 35px auto ;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);      
}
.my-info{
    background-color: rgb(224, 224, 224);
}
.my-info .fas{
    color: crimson;
}
.my-about{
    background-color: rgb(224, 224, 224);
}
.my-about .fas{
    color: crimson;
}
.my-footer{
    margin: 5px auto;
}
.my-footer .fas{
    color: crimson;
}

我希望它可以调整大小并变得响应，并且可以通过适当的引导程序类来完成。我相信弹性盒子和网格系统。我是 1000% 我把课程混在一起了，无法找出错误。我很抱歉，但我在这里尝试不要成为 1000% 的菜鸟，但我无法纠正它。

问题。

欢迎部分应该是右侧栏的全宽，但不是。
当页面调整大小时，定义了两行。最上面的不应该是屏幕的一半，而应该只有一行包含链接。顶部的图标及其下方的相应链接。顶部的用户+ 图标，下方的注册文本。顶部的 i 图标和下方的文本信息。一行中的所有图标（内联？）导航不是查看区域的一半。目前它垂直平移，它应该水平成直线。
只有欢迎屏幕/幻灯片应该可见，并且单击图标后，相关文本应该像第二个 codepen 链接一样向左滑动。在移动视图上，它会从顶部滑动，因为移动视图是从上到下的（不知道正确的术语，抱歉！）
登录和注册（公司字段）的重点是引导程序默认的浅蓝色。我在引导程序上阅读并搜索了 Stackoverflow 并将其余部分更改为深红色作为我要使用的主题，但是这两个领域我已经敲了我的头并且它没有改变。

我知道由于课程混乱，我还需要几个月的时间才能使它几乎可以正常工作。我明白那个。在桌面视图中，我希望侧边菜单具有第一个 codepen 链接 hoover 样式，它跟随光标。因此，两种代码的混合都可以完全响应而无需媒体查询。

解决方案。

迷失了，不知道说实话。是的，CSS 文件说 style9.css，因为我是这个的第九个变体！我觉得很有趣，我没有放弃这个，我不想放弃，当然，在帮助和帮助下完全做到这一点，因此，这篇文章。桌面和移动视图上也有一个图像，它很好地集中在两个视图上。我不知道我是怎么做到的。

如果有人至少可以为我检查课程并指出我在哪里搞砸了，我会尝试清理它并使用推荐的课程或术语使其正常工作。

我在这里为这部小说真诚地道歉，但我缺乏知识，需要我尽我所能明确地解释。

如果有人可以提供帮助和建议？检查代码？我会非常感激。谢谢你，周末愉快。

问候。

-球座

标签： htmlcsstwitter-bootstrapresponsive

html - 响应式登录/注册/信息/关于页面未正确调整大小

问题描述

解决方案

推荐阅读