【问题标题】:Bootstrap interferes with the look/design of websiteBootstrap 干扰了网站的外观/设计
【发布时间】:2015-02-23 03:20:06
【问题描述】:

这是我的网站在安装 Bootstrap 之前的样子:

然后,使用此代码:<.link rel="stylesheet" href=http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css 在我的网站上安装 Bootstrap,如下所示:

这是我的 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;
}

【问题讨论】:

  • 你遇到了什么问题...
  • 你想通过安装 Bootstrap 解决什么问题?通常,您会为一个全新的页面/站点使用 Bootstrap。

标签: html css twitter-bootstrap


【解决方案1】:

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

【讨论】:

    【解决方案2】:

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

    从使用rowscolumns 开始,一切都会到位。

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

    【讨论】:

      猜你喜欢
      • 2019-05-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-04-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多