css - 添加 bootstrap 链接后，代码显示是否更改？

因此，我计划使用引导程序使登录页面响应。但是，当我在代码中添加引导程序链接时，由于某些原因，HTML的显示会受到影响。我想知道为什么会这样，您能给我个提示如何使我的登录页面具有响应性吗？
这是添加了引导程序链接的图像：



这是没有引导程序链接的图像：



我的代码：

body {
    width: auto;
    margin:0;
    padding:0;


}

@font-face {
    font-family: "Gidole";
    src: url(CODE Light.otf);
}

h2 {
    text-align: center;

}

.container {
    width: 960px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    position: relative;

}


.row {
    width: 320px;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #191919;
    background-color: green;
    box-shadow: 0 1px 1px #ABBEB5;
    font-family: "Gidole", sans-serif;
    padding: 10px 55px 40px;
    border: 1px solid black;

}


input[type=text],[type=password] {
    width: 97%;
    height: 22px;
    padding-left: 5px;
    margin-bottom: 20px;
    margin-top: 8px;
    color: #191919;
    font-family: "Gidole", sans-serif;
    margin-top:5px;


}

#login {
    width: 100%;
    margin-top: 5px;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    /* display: block; use for centering  */
    display: block;
    color: #000000;

}

#signup {
    color: #191919;
    margin-top: 5px;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    display: block

}

#forgotpass {
    color: #191919;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    display: block
}

<link rel="stylesheet" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" />

<div class="container">
    <div class="row">
        <h2> User Login </h1>
        <div class="myForm1">
            <form action="p1.php" method="POST">
                <input type="text" name="username" placeholder="Username" /> <br/>
                <input type="password" name="password" placeholder="Password" /> <br/>
                <input type="submit" name="submit" id="login"/>
            </form>

            <form action="register.php" method="POST">

                <p> <a href="register.php" name="register" id="signup"> Sign up </a> </p>
                <p> <a href="" name="register" id="forgotpass"> Forgot password? </a> </p>

            </form>
        </div>
    </div>
</div>

最佳答案

Twitter Bootstrap是css和js组件的集合，可以在项目中使用。

您在项目中使用了Bootstrap使用的一些类名。如果不加载Bootstrap，则库中为这些类定义的规则将不适用，因为您没有加载库。加载时，它们适用。

您使用的某些类以及Bootstrap样式设置的类是：container和row。您应该花一些时间浏览它们的示例，并检查所应用的CSS规则以更好地理解每个规则。

另外，当您决定使用Bootstrap时，到目前为止，最佳实践是从提供的示例开始，并尝试将修改降至最低，尤其是在布局方面。

请注意，Bootstrap提供了针对大多数常见布局问题的修复程序和解决方案，例如


浏览器渲染差异
反应性




但是，再次。 Bootstrap不是可以分析和修复页面的机器人。它只是CSS规则，@media查询（有时是小的js代码段）的集合。如果计划使用它，则需要学习这些组件的功能。

假装它开箱即用，就像假装飞机自己飞一样。有些可以，但是最好还是知道如何操纵，降落和起飞，以防万一自动系统出现故障。