响应式 Login/Signup/info/About 页面未正确调整大小

Question

我正在尝试使用 bootstrap 4.5 创建一个 login/signup 页面我不是开发人员，看过一些 YouTube 视频来了解事情。我想让这个页面响应，因为 bootstrap 是移动优先的。不幸的是，我迷失在 classes 中，而且我读得越多，我就越迷失。到目前为止，我不知如何在两周内以某种方式设法完成了这一页。在我看来它看起来不错。最初的想法来自 https://codepen.io/microsarme6943/pen/LbNNrN I could not make it responsive. Then came across 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;
}

我想让它调整大小并变得响应式，这可以通过 bootstrap 的适当 classes 来完成。我相信柔性盒和网格系统。我是 1000% 我混合了 classes 并且无法找出错误。我很抱歉，但我在这里不想成为一个 1000% 的菜鸟，但我没有纠正它。

问题。

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

我知道由于 classes 混乱，我还需要几个月的时间才能使它接近体面地工作。我明白那个。在桌面视图中，我希望侧边菜单在光标之后具有第一个 codepen link 胡佛样式。因此，在没有媒体查询的情况下，两种代码笔的混合完全响应。

解.

老实说，迷路了，不知道。是的，CSS 文件显示 style9.css，因为我正在使用它的第九个变体！我觉得很有趣，我没有放弃，我不想放弃，当然也不想在帮助和帮助下完全做到，因此，post。在桌面和移动视图上也有一个图像，并且它在两个视图上都很好地居中。我不知道我是怎么做到的。

如果有人至少可以帮我检查一下 classes 并指出我在哪里搞砸了，我会尝试清理它并使用推荐的 class 或术语使其正常运行.

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

有没有哪位大神可以帮忙推荐一下？检查代码？我将不胜感激。谢谢，祝周末愉快。

此致。

-T 恤

Answer 1

我看到使用 bootstrap Bootstrap Grid Documentaion

    <div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

响应式 Login/Signup/info/About 页面未正确调整大小

Responsive Login/Signup/info/About page is not resizing correctly

html

css

twitter-bootstrap

responsive