Question

当我将Bootstrap添加到我的文件时，

我的<div>形状发生了变化。在我添加Bootstrap之前，这就是我的设计：

enter image description here

我添加了Bootstrap后：

enter image description here

我的布局html：

<html>
<head>
    <title>@ViewBag.Title</title>
     <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
     <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
    <style>
       @@import "@Url.Content("~/Content/admin.css")"
    </style>
    @RenderSection("Header",false)
</head>
<body>
    <div class="kapsayici">
        <div class="wrapper">
            <ul class="menu">
                <li class="anasayfa-m"><a href="">Anasayfa</a></li>
                <li class="yazilar-m"><a href="">Yazılar</a></li>
                <li class="kategoriler-m"><a href="">Kategoriler</a></li>
                <li class="sayfalar-m"><a href="">Sayfalar</a></li>
                <li class="gorunum-m"><a href="">Görünüm</a></li>
                <li class="yorumlar-m"><a href="">Yorumlar</a></li>
                <li class="kullanicilar-m"><a href="">Kullanıcılar</a></li>
            </ul><br />
        </div>
        @RenderBody()
    </div>
</body>
</html>

我的主要HTML页面：

<div class="yazilar"><span>Yazılar</span></div>
<div class="kategoriler"><span>Kategoriler</span></div>
<div class="sayfalar"><span>Sayfalar</span></div>
<div class="gorunum"><span>Görünüm</span></div>
<div class="yorumlar"><span>Yorumlar</span></div>
<div class="kullanicilar"><span>Kullanıcılar</span></div>

admin.css：

body {
overflow: hidden;
}
.kapsayici {
float: left;
padding-left: 18%;
width: 100%;
height: 100%;
}
.yazilar, .kategoriler, .sayfalar, .gorunum, .yorumlar, .kullanicilar {
float: left;
width: 20%;
height: 32.36%;
}
.wrapper ~ div {
font-family: Verdana;
}
div span {
float: left;
margin: 50% 35%;
}
.kategoriler, .sayfalar {
margin-left: 1%; 
}
.gorunum {
margin-top: 1%;
clear: left;
}
.yorumlar, .kullanicilar {
margin-left: 1%;
margin-top: 1%; 
}
.yazilar {
background:url(../Images/icons/yazılar.png) #e1e1e1 no-repeat;
background-position: 50% 30%;
}
.kategoriler {
background:url(../Images/icons/kategori.png) #e1e1e1 no-repeat;
background-position: 50% 30%;
}
.sayfalar {
background:url(../Images/icons/sayfalar.png) #e1e1e1 no-repeat;
background-position: 50% 30%;
}
.gorunum {
background:url(../Images/icons/theme.png) #e1e1e1  no-repeat;
background-position: 50% 30%;
}
.yorumlar {
background:url(../Images/icons/comments.png) #e1e1e1 no-repeat;
background-position: 50% 30%;
}
.kullanicilar {
background:url(../Images/icons/users.png) #e1e1e1 no-repeat;
background-position: 50% 30%;
}
.yazilar:hover {
background:url(../Images/icons/yazılar.png) #eeeeee no-repeat;
background-position: 50% 30%;
}
.kategoriler:hover {
background:url(../Images/icons/kategori.png) #eeeeee no-repeat;
background-position: 50% 30%;
}
.sayfalar:hover {
background:url(../Images/icons/sayfalar.png) #eeeeee no-repeat;
background-position: 50% 30%;
}
.gorunum:hover {
background:url(../Images/icons/theme.png) #eeeeee no-repeat;
background-position: 50% 30%;
}
.yorumlar:hover {
background:url(../Images/icons/comments.png) #eeeeee no-repeat;
background-position: 50% 30%;
}
.kullanicilar:hover {
background:url(../Images/icons/users.png) #eeeeee no-repeat;
background-position: 50% 30%;
}
/* menü */
ul.menu { 
    width: 62%;
    height: 11%;
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    background-color: #e1e1e1;
    font-family: Verdana;
    font-size: 10px;
    box-shadow: 0 1px 0 #e1e1e1;
}
ul.menu li { 
    float: left;
    width: 13.14%;
    height: 100%;
    padding-right: 1%;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
}
ul.menu li a {
position: relative;
top: 70%;
left: 27%;
color: #000;
}
ul.menu li:hover {
border-bottom: 3px solid #FFF;
}
ul.menu li.kategoriler-m a {
left: 23%;
}
ul.menu li.sayfalar-m a {
left: 31%;
}
ul.menu li.yazilar-m a {
left: 35%;
}
ul.menu li.yazilar-m {
background: url(../Images/icons/myazılar.png) #e1e1e1 no-repeat;
background-position: 50% 35%;
}
ul.menu li.kategoriler-m {
background: url(../Images/icons/mkategori.png) #e1e1e1 no-repeat;
background-position: 50% 35%;
}
ul.menu li.sayfalar-m {
background: url(../Images/icons/msayfalar.png) #e1e1e1 no-repeat;
background-position: 50% 35%;
}
ul.menu li.gorunum-m {
background: url(../Images/icons/mtheme.png) #e1e1e1 no-repeat;
background-position: 50% 35%;
}
ul.menu li.yorumlar-m {
background: url(../Images/../Images/icons/mcomments.png) #e1e1e1 no-repeat;
background-position: 50% 35%;
}
ul.menu li.kullanicilar-m {
border-right: none;
background: url(../Images/icons/musers.png) #e1e1e1 no-repeat;
background-position: 50% 35%;
}
ul.menu li a { 
        text-decoration: none; 
}

我试图找出哪些<div>重叠可能导致此问题，但我找不到任何内容。感谢您的帮助。

小提琴：http://jsfiddle.net/MDGZ7/

Answer 1

主要问题是Bootstrap包含的normalize.css。这种情况的原因是页面没有设计使用Bootstrap，并且在页面的设计过程之后添加了Bootstrap。解决方案是：

1-使用Bootstrap重新设计页面

2-停用包含normalize.css的bootstrap.css的一部分（但在我看来，它不是永久解决方案。）

Answer 2

我建议您在Chrome的开发者工具中玩游戏。 Bootstrap使用Normalize.css将一些CSS元素重置为默认值（或类似的东西）。使用开发人员工具查找重置的样式（您可以打开和关闭样式以查看它对页面的影响）。

Bootstrap与我的CSS重叠

2 个答案: