如何忽略主 css 中的引导代码
[英]How to ignore bootstrap codes from main css
问题描述
PROBLEM: I am having problems in my bootstrap imports that seems to be affecting my link logo and social icon border.
问题：我的引导程序导入出现问题，似乎影响了我的链接徽标和社交图标边框。 If i remove the link for the bootstrap, the logo and icon borders will work fine.如果我删除引导程序的链接，徽标和图标边框将正常工作。 However, I need the bootstrap tag for the gallery.但是，我需要画廊的引导标签。 Can someone help me fix this?有人可以帮我解决这个问题吗？
this is the code with errors这是有错误的代码
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
This is the source of error (Specifically the code above) :这是错误的来源（特别是上面的代码）：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sabreen's Seafood Market & Restaurant</title>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/seafood-favicon.png"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
</head>
This is my current output with the link for the bootstrap enabled.You could see that the logo and social box is not properly placed.这是我当前的输出，启用了引导程序的链接。您可以看到徽标和社交框未正确放置。
This is what it looks like when i commented the bootstrap link.这是我评论引导程序链接时的样子。 You can see that the logo and social border works fine, but the gallery does not.您可以看到徽标和社交边界工作正常，但图库却没有。
Is there anyway for me to fix both?反正我有办法解决这两个问题吗？
HERE IS THE HTML CODE这是 HTML 代码
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sabreen's Seafood Market & Restaurant</title>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/seafood-favicon.png"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
<a name="home">
<!--- Start Navigation -->
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/main.js"></script> <!--- For Navigation -->
<!---ADD NAVIGATION HERE-->
<div class="logo">
<a href="index.php"><img src="images/seafoodLogo.png"></a>
</div>
<div class="nav-outer">
<div class="nav-wrap">
<nav class="navigation">
<div class='nav' nav-menu-style="yoga">
<ul class="nav-menu">
<li> <a href="explore.php">EXPLORE</a></li>
<li> <a href="menu.php">MENU</a></li>
<li> <a href="#gallery">GALLERY</a></li>
<li> <a href="reservation.php">RESERVATION</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class="nav-clear"></div>
<!--- End Navigation -->
<div class="clearfix"></div>
<!-- Start of Content -->
<h1> Check out some of our Suggested Paluto!</h1>
<section class="paluto">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box-paluto">
<div class="imgBox-paluto">
<img src="images/menu/crabs1.jpg" class="img-responsive">
</div>
<div class="content-paluto">
<h3>Sweet Chili Crab</h3>
<p>Considered as one of our year-round staples, our bright and bold #ChiliCrab packs a lot of flavor and heat! If you prefer to have it mildly spiced, our kitchen team is flexible with all types and tastes and preference.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box-paluto">
<div class="imgBox-paluto">
<img src="images/menu/crabs2.jpg" class="img-responsive">
</div>
<div class="content-paluto">
<h3>Grilled Crab</h3>
<p>Our take on #GrilledCrab is deliciously simple and oozing with smoky flavor. Plus it's meaty and guaranteed fresh! Contact us on our Facebook fan page for booking and inquiries.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box-paluto">
<div class="imgBox-paluto">
<img src="images/menu/crabs3.jpg" class="img-responsive">
</div>
<div class="content-paluto">
<h3>Sweet Chili Crab with Black Pepper</h3>
<p>Thankfully, crabs are always at full swing and piled high in our #seafoodrestaurant! Roll up your sleeves and get ready to indulge our #chilicrab that's deliciously drenched with garlic and herbs. We're open 'til 10:30 pm so it's never too late to satisfy your cravings for crustaceans!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End of Content -->
<div class="clearfix"></div>
<footer>
<center>
<a href="https://www.facebook.com/seafoodmarketandrestaurant/" target="_blank" title="Follow us on Facebook" class="fa fa-facebook" style="margin-bottom: 10px;"></a></center>
<p> © 2018 SABREEN'S SEAFOOD MARKET & RESTAURANT ALL RIGHTS RESERVED</p>
</footer>
</body>
HERE IS THE CSS CODE FOR MY NAV.CSS AND STYLES.CSS这是我的 NAV.CSS 和 STYLES.CSS 的 CSS 代码
/*styles.css*/
/*---Body Font--*/
@import url(https://fonts.googleapis.com/css?family=Hindi);
/*---Heading Font--*/
@import url(https://fonts.googleapis.com/css?family=Nobile);
/*---Social Font--*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
/*---Menu Gallery Font--*/
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background-color: #fffdf9;
font-family: 'Times New Roman', Times, serif;
font-size: 18px;
position: relative;
}
h1 {
font-family: 'Times New Roman', Times, serif;
text-align: center;
font-size: 175%;
color: #494949;
text-transform: uppercase;
letter-spacing: 3px;
padding: 3% 0;
}
h2 {
font-family: 'Times New Roman', Times, serif;
text-align: center;
font-size: 150%;
color: #494949;
text-transform: uppercase;
letter-spacing: 3px;
padding: 3% 0;
}
h3 {
font-family: 'Times New Roman', Times, serif;
text-align: center;
color: #494949;
text-transform: uppercase;
letter-spacing: 1%;
}
p {
padding: 2%;
color: #4A4444;
text-align: justify;
font-size: 125%;
}
img {
max-width: 100%;
max-height: auto;
}
#banner-wrapper {
max-width: 1280px;
margin: 0 auto;
}
/*---Start Image Slider Style--*/
.slider {
width: 100%;
}
.slider1 img {
min-width: 100%;
}
.slider .bx-wrapper .bx-controls-direction a {
outline: 0 none;
position: absolute;
text-indent: -9999px;
top: 40%;
height: 71px;
width: 40px;
z-index: -1;
transition: all 0.7s;
}
.slider .bx-wrapper:hover .bx-controls-direction a{
z-index: 5;
}
.slider .bx-wrapper .bx-prev {
background: #000 url("img/left-arrow-white.png") no-repeat 8px 13px;
left: 0;
opacity: 0.3;
}
.slider .bx-wrapper .bx-prev:hover {
opacity: 0.6;
}
.slider .bx-wrapper .bx-next {
background: #000 url("img/right-arrow-white.png") no-repeat 10px 12px;
right: 0px;
opacity: 0.3;
}
.slider .bx-wrapper .bx-next:hover {
opacity: 0.6;
}
/*---End Image Slider Style--*/
.reservation {
margin-top: 25px;
}
.reservation p {
width: 70%;
text-align: center;
}
.one-half {
width: 44%;
float: left;
margin: 2% 0 3% 4%;
text-align: center;
}
.one-third {
width: 28%;
float: left;
margin: 2% 0 3% 4%;
text-align: center;
}
.left-col {
width: 60%;
float: left;
margin: 4% 0 4% 4%;
}
.sidebar {
width: 26%;
float: right;
margin: 4% 4%;
}
.sidebar img {
opacity: 1;
}
.clearfix {
clear: both;
}
/*---Start Parallax Section--*/
.parallax-1 {
background: url("../images/parallaxBG.jpg") fixed 100%;
text-align: center;
max-height: 300px
}
.parallax-inner {
padding-top: 90px;
padding-bottom: 300px;
}
.parallax-2 {
background: url("https://www.w3newbie.com/wp-content/uploads/black-pattern.jpg") repeat fixed 100%;
text-align: center;
}
.parallax-inner h3, .parallax-inner p{
color: #F1F1F1;
}
/*---End Parallax Section--*/
/*Start of Menu Gallery Section*/
section.paluto {
padding: 50px 0 0 ;
}
.box-paluto {
position: relative;
width: 100%;
height: 280px;
overflow: hidden;
background: #000;
box-shadow: 0 5px 15px rgba(0,0,0,.5);
transition: .5s;
}
.box-paluto:hover {
transform: translateY(-30px);
}
.box-paluto .imgBox-paluto {
position: relative;
}
.box-paluto .imgBox-paluto img {
transition: .5s;
width: 100%;
}
.box-paluto:hover .imgBox-paluto img {
opacity: .5;
transform: translateY(-20px);
}
.box-paluto .content-paluto{
position: absolute;
bottom: -30px;
left: 0;
padding: 20px;
box-sizing; border-box;
transition: .5s;
opacity: 0;
}
.box-paluto:hover .content-paluto{
opacity: 1;
bottom: 0;
}
.box-paluto .content-paluto h3{
font-size: 28px;
color: #fff;
font-weight: 700;
}
.box-paluto .content-paluto p{
font-size: 15px;
color: #fff;
font-weight: 400;
}
@media only screen and (max-width: 700px){
.box-paluto{
height: auto;
max-width: 100%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.box-paluto{
max-height: 300px;
max-width: 300px;
margin: 15px 0;
}
}
/*End of Menu Gallery Section*/
/*Start of Social*/
.fa {
padding: 5px;
margin: 2px;
font-size: 15px;
width: 15px;
height: 15px;
border-radius: 25%;
text-align: center;
justify-content: center;
text-decoration: none;
border: 4px solid #d3d3d3;
transition: all 0.5s;
background: #fff;
}
.fa:hover {
-webkit-animation: expand 0.5s ease-in-out;
-moz-animation: expand 0.5s ease-in-out;
animation: expand 0.5s ease-in-out;
color: #fff;
}
@keyframes expand {
33% { transform: scale(1.1); }
66% { transform: scale(0.9); }
100% { transform: scale(1.0); }
}
@-webkit-keyframes expand {
33% { transform: scale(1.1); }
66% { transform: scale(0.9); }
100% { transform: scale(1.0); }
}
@-moz-keyframes expand {
33% { transform: scale(1.1); }
66% { transform: scale(0.9); }
100% { transform: scale(1.0); }
}
.fa-facebook {
color: #3B5998;
}
.fa-facebook:hover {
background: #3B5998;
}
/*End of Social*/
/*---Start Footer--*/
footer {
background: #fffdf9;
opacity: 0.9;
width: 100%;
/*margin-top: 5%;*/
padding: 1% 0;
overflow: auto;
}
footer p{
color: #fff;
text-align: center;
font-size: 12px;
background-image: linear-gradient(to left, #d0d5de, #001947 40%, #001947 60%, #d0d5de 100%);
padding: 7px 0;
}
iframe {
width: 60%;
height: 400px;
}
/*---Start Media Queries--*/
@media screen and (max-width: 768px) {
.slider .bx-wrapper .bx-controls {
display: none;
}
.parallax-inner {
display: none;
}
.one-third {
width: 100%;
margin: 4% 0;
}
.one-half {
display: none;
}
h1 {
font-size: 125%;
}
.left-col {
width: 100%;
margin: 0 0 3% 0;
}
.sidebar {
width: 100%;
margin: 0;
}
.sidebar img {
max-width: 75%;
height: auto;
}
h3 {
padding-top: 3%;
}
.social-container {
display: block;
}
footer{
margin-top: 15px;
}
.reservation p {
margin-top: 155px;
width: 80%;
}
iframe {
width: 80%;
height: 400px;
}
}
/*nav.css*/
@import url(https://fonts.googleapis.com/css?family=Questrial);
/*--- Nav Font --*/
/*--- Start Navigation Style --*/
.nav-outer {
width: 100%;
height: 67px;
background: #fffdf9;
position: fixed !important;
z-index: 1;
}
.nav-wrap {
max-width: 100%;
margin: 0 auto;
}
nav {
margin-top: 0;
background: #fffdf9;
font-family: 'Times New Roman', Times, serif;
}
.nav ul {
overflow:hidden;
list-style:none;
}
.nav-button:hover {
cursor:pointer;
}
.navigation {
clear: both;
width: 100%;
position: relative;
}
.nav a {
color: #494949;
text-transform: uppercase;
text-decoration:none;
}
body .nav .nav-menu li a {
display:inline-block;
margin-top: 10px;
padding:15px 20px;
color: #494949;
font-size: 19px;
}
.nav.yoga .nav-menu li.active a {
color: #494949;
text-decoration: underline;
}
.nav.yoga .nav-menu li a:hover {
color: #494949;
text-decoration: underline;
}
.nav.yoga .nav-toggled {
min-height:36px;
border-radius:6px;
margin-top: -7px;
}
.nav.yoga .nav-toggled-controls {
display:block;
height:40px;
text-align:left;
position:relative;
}
.nav.yoga .nav-toggled-title {
position:relative;
top:9px;
left:15px;
font-size:16px;
}
.nav.yoga .nav-button {
display:block;
position:absolute;
right:15px;
top:8px;
background: #0a0c42;
}
.nav.yoga .nav-button span {
display:block;
margin-top:4px;
height:2px;
background: #0a0c42;
width:24px;
}
.nav-toggled-controls{
border-bottom: 0px solid #0a0c42;
}
.nav.yoga .nav-toggled ul li a {
display:block;
width:100%;
background-color: #505E67;
text-align:left;
padding:10px 0px 10px 15px;
border-bottom:1px solid #FFF;
text-align: center;
font-size: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nav.yoga .nav-toggled ul li ul a {
font-size: 15px;
text-transform: none;
}
.nav.yoga .nav-toggled ul li.active a {
background-color: #F5F5F5;
color: #505E67;
}
.nav.yoga .nav-toggled ul li a:hover {
background: #F5F5F5;
color: #505E67;
}
.nav.yoga .nav-toggled ul li {
position: relative;
}
.toggle-sm:after {
position: absolute;
right: 15px;
top: 10px;
font-size: 18px;
line-height: 25px;
}
.toggle-sm:after {
content: '+';
cursor: pointer;
}
.toggle-sm.open:after {
content: '-';
cursor: pointer;
}
.nav .nav-menu {
text-align: center;
overflow: visible;
min-height: 56px;
padding-left: 0;
margin: 0;
}
@media (min-width: 823px) {
.nav {
float: right;
}
.logo {
float: left;
}
}
@media screen and (max-width: 822px) {
body .nav .nav-menu li a {
margin-top: 4px;
}
.logo img {
max-width: 135px !important;
margin-bottom: 3px;
}
.nav-outer {
height: 21px;
}
.nav.yoga .nav-toggled-controls {
top: -40px;
margin-bottom: -36px;
}
.nav-clear {
padding-top: 37px;
margin-bottom: -15px;
}
}
.logo img {
max-height: 100px;
height: auto;
margin-left: 30px;
margin-bottom: 5px;
background-color: #002859;
z-index: 2;
position: absolute;
padding: 70px 10px 50px 10px;
background-image: linear-gradient(#253688, #060729);
}
.navigation:after {
content: "";
display: table;
clear: both;
}
.nav .nav-menu li {
display:inline-block;
padding:0px;
margin:0px !important;
position: relative;
}
.nav-button:hover {
cursor:pointer;
}
.nav .nav-toggled ul {
display:none;
margin:0px ;
padding:0px ;
position: relative;
}
.nav .nav-menu > li > ul {
position: absolute;
z-index: 10000000000;
top: 50px;
text-align: left;
background: #505E67;
width: 100%;
padding-left: 0;
display: none;
}
.nav.yoga .nav-menu > li > ul a {
padding: 11px 15px;
font-size: 18px;
font-weight: normal;
text-transform: none;
}
.nav .nav-menu > li > ul li {
position: relative;
width: 100%;
text-align: center;
}
.nav .nav-menu > li > ul > li ul {
position: absolute;
right: -100%;
top: 0;
width: 100%;
padding-left: 0;
background: #505E67;
}
.nav .nav-menu > li > ul > li ul a {
white-space: nowrap;
}
.nav ul {
overflow: visible;
}
.has-children {
position: relative;
}
.has-children:after {
content: '+';
color: #FFF;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
cursor: pointer;
}
.has-children:hover:after {
content: '-';
color: #FFF;
cursor: pointer;
}
body .nav .nav-menu li a {
padding: 15px 30px;
}
.clicker {
width: 45px;
height: 45px;
position: absolute;
right: 0;
z-index: 30000;
}
.nav-clear {
clear: both;
padding-top: 67px;
}
/*--- End Navigation Style --*/
/*--------------------MEDIA!!!---------------*/
@media screen and (max-width: 768px) {
#banner-wrapper {
position: relative;
-ms-overflow-x: hidden;
overflow-x: hidden;
}
.nav-menu {
display: none;
}
}
2 个解决方案
解决方案1
0 2018-09-25 10:03:40
add your bootstrap css at the top在顶部添加您的引导 css
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sabreen's Seafood Market & Restaurant</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
rel="stylesheet" >
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/seafood-favicon.png"/>
</head>
解决方案2
0 2018-09-25 10:24:33
As you have not posted the full code here , I can suggest you to do this List out all the properties that are overlapping when you add the external CSS File.由于您尚未在此处发布完整代码，因此我建议您在添加外部 CSS 文件时列出所有重叠的属性。
for suppose i have a <div class="firstDiv" id="firstDivId"></div>假设我有一个<div class="firstDiv" id="firstDivId"></div>
1.Overwrite the properties which are affecting using !important property. 1.覆盖影响使用!important属性的属性。
In file1 i have在文件 1 我有
.firstDiv{
width:33%;
}
which is overridden by bootstrap css被引导 css 覆盖
.firstDiv{
width:100%;
}
In file1 you update the property using !important在 file1 中，您使用 !important 更新属性
.firstDiv{
width:33%!important;
}
2.download the css file , attach to your project then update the bootstrap.css file with :not selector 2.下载 css 文件，附加到您的项目，然后使用:not选择器更新 bootstrap.css 文件
In bootstrap.css property should be like在 bootstrap.css 属性应该像
.firstDiv:not('#firstDivId'){
width:33%;
}
Hope this may help you.希望这可以帮助你。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何忽略来自 WordPress 插件样式表的特定 CSS 代码？ - How to ignore the specific CSS codes coming from the WordPress plugin stylesheet?
如何忽略父框中的CSS样式？ - How to ignore the CSS style from the parent box?
与主要的CSS搞砸了引导CSS - with main css messed up bootstrap css
引导缩略图忽略居中CSS - Bootstrap thumbnail images ignore centering css
如何忽略全局css？ - How to ignore global css?
如何阻止移动CSS被主要CSS覆盖 - How to stop mobile CSS from getting overridden by main CSS
如何从css或bootstrap实现此水平线 - how to achieve this this horizontal line from css or bootstrap
如何使用引导程序或 css 水平内联 - how to horizontally inline from using bootstrap or css
如何忽略CSS中的滚动条宽度？ - How to ignore a scrollbar width in CSS?
如何忽略CSS底层属性？ - How to ignore CSS bottom property?
相关标签