当我添加引导链接时，我的代码显示更改了吗？

Question

所以我打算使用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>

Answer 1

Twitter Bootstrap是准备在您的项目中使用的css和js组件的集合。

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

您使用的一些类和Bootstrap样式是：container和row。你应该花一些时间，看看他们的例子，并检查应用的CSS规则，以更好地理解每个做的。另外，当您决定使用Bootstrap时，最佳实践（到目前为止）是从他们提供的示例开始，并尝试将修改保持在最低限度，尤其是关于布局。

请注意引导提供补丁和解决方案，最常见的布局问题，如

• 浏览器呈现差异
• 响应

---

但一次。 Bootstrap不是一个分析和修复你的页面的机器人。这只是CSS规则的集合，@media查询（有时还包含小的js片段）。如果您打算使用它，您需要了解每个组件的功能。

假装它开箱即用就像假装飞机飞行一样。有些人会这样做，但最好还是知道如何驾驶，着陆和起飞，以防万一自动系统发生故障。

Answer 2

为了进一步阐述什么@Andrei乔治乌回答，请打开 您的控制台上的谷歌Chrome浏览器（右键然后选择 '检查元素' 或按Ctrl + Shift + I或F12）

您可以在图像中看到您的[style.css] {width}属性中的类{container}已被Twitter Bootstrap [bootstrap.min.css]类{容器}属性覆盖（请检查您的控制台）。

CSS属性将根据您的css文件的导入顺序而变化。在这种情况下，我导入CSS文件顺序如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
<link rel="stylesheet" href="style.css" /> 

这意味着CSS属性将由[bootstrap.min.css]开始的[style.css文件] 遵循因此，如果我们扭转命令是这样的：

<link rel="stylesheet" href="style.css" /> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 

会发生这种情况：

而这一次....

现在，Twitter Bootstrap [bootstrap.min.css] class {container}属性将覆盖[style.css] class {container}属性。

你也可以看到这里有一个前缀'@media'。您可以了解更多有关使用@media查询 让你的登录页面响应这里：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

但像@Andrei提，你可以从引导的提供的例子开始你的登录页面的布局，并保持你的风格，想尽量最小。希望这对你有帮助。