Question

以下是我的网站在安装Bootstrap之前的样子：

enter image description here

然后，使用以下代码：<.link rel="stylesheet" href=http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css在我的网站上安装Bootstrap，它看起来像这样：

enter image description here

以下是我的 HTML 代码：

<!DOCTYPE html>
<html>
<title>Toontown Classic</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<body>

    <div class="wrapper">
    </div>

    <div class="contentLogo">

    </div>

    <div class="ContentIMG">
    </div>

    <div class="contentTEXT"
    </div>  
</body>
</html>

CSS

body {
background-image: url("bg.png");
width: 100%
background-repeat: no-repeat;
background-attachment: fixed;
}
.wrapper {
width: 300px;
margin: 0 auto;
}
.contentLogo {
position: relative;
border: 1px solid #666666;
background: #FFFFFF;
padding: 40px 300px; 
width: 300px;
border-radius: 5px;
margin-left: auto;
margin-right: auto;
top: 10px;
}
.ContentIMG {
position: relative;
border: 1px solid #666666;
background: #FFFFFF;
padding: 40px 300px; 
width: 300px;
height: 300px;
border-radius: 5px;
margin-left: auto;
margin-right: auto;
top: 17px;
}
.contentTEXT {
position: relative;
border: 1px solid #666666;
background: #FFFFFF;
padding: 40px 300px; 
width: 10px;
height: 300px;
border-radius: 5px;
margin-left: auto;
margin-right: auto;
top: 25px;
right: -145px;
}

Answer 1

Bootstrap具有html元素的默认样式。通常，大多数人在包含引导样式之后放置自定义样式表，并覆盖他们想要更改的样式。

Answer 2

Bootstrap有一个强烈推荐的网格系统。

首先使用rows和columns，一切都将落实到位。

示例：http://getbootstrap.com/examples/grid/

Bootstrap会干扰网站的外观/设计

2 个答案: