gpt4 book ai didi

css - Bootstrap 与我的 CSS 重叠

转载 作者:太空宇宙 更新时间:2023-11-04 03:45:20 25 4
gpt4 key购买 nike

我的 <div>当我将 Bootstrap 添加到我的文件时,形状发生了变化。这是我的设计在添加 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>重叠可能会导致这个问题,但我没有找到任何东西。提前感谢您的帮助。

fiddle :http://jsfiddle.net/MDGZ7/

最佳答案

主要问题是 Bootstrap 包含的 normalize.css。出现这种情况的原因是页面没有使用Bootstrap设计,而Bootstrap是在页面设计过程之后加入的。解决方案是:

1- 使用 Bootstrap 重新设计页面

2- 停用包含 normalize.css 的 bootstrap.css 部分(但我认为这不是永久解决方案。)

关于css - Bootstrap 与我的 CSS 重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24227724/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com