0
我的<div>當我將Bootstrap添加到我的文件時更改了形狀。這是我的設計怎麼看之前，我加入引導：我添加引導後引導程序與我的css重疊
：
我的佈局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/
你可以做（但它不是在我看來永久性的解決方案。）在jsfiddle中的演示 – ndcweb
@ndcweb抱歉，我不能，因爲我不能在jsfiddle中添加Bootstrap。如果有添加bootstrap和我的css的方法，我可以做一個演示。 –
有一種方法可以將Bootstrap添加到jsfiddle。點擊左側的外部資源，並從一些CDN添加到bootstrap.css和bootstrap.js的路徑。不幸的是我現在必須出去，但如果沒有人幫助你，我會在稍後檢查。 – ndcweb