Question

@charset "utf-8";
/* CSS Document */


body {background: #ccd3d7;}

div[class*='stack'] {
    float: left;
    position: relative;
    margin: 40px;
}

div[class*='stack'], div[class*='stack']:before, div[class*='stack']:after {
    border: 6px solid #fff;
    height: 200px; width: 200px;
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

div[class*='stack']:before, div[class*='stack']:after {
    background: #768590;
    content: "";
    position: absolute;
    z-index: -1;
}

div[class*='stack']:before {
    background: #eff4de;
}

/*stack TWO*/
.stacktwo:before {
    top: 0px;
    left: -10px;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

.stacktwo:after {
    top: 5px; left: 0px;
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -o-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
}

/*stack THREE*/
.stackthree:before {
    top: 5px;
    left: -15px;
    z-index: -1;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

.stackthree:after {
    top: -2px;
    left: -10px;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

Here是本网站上的一些很棒的代码，用于＃34; stack＆＃34;相片。与bootstrap.css一起使用时，它无法正常工作。我怎样才能找到冲突？

图像与bootstrap.css失去了边界如果我不使用它，那么每件事都会正常显示。

这是我的HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="assets/css/style.css" type="text/css" />
<!--[if lt IE 9]>
    <script src="assets/js/html5shiv.js"></script>
    <script src="assets/js/respond.min.js"></script>
<![endif]-->

</head>

<body>

<div class="container"> 

    <div class="row">
        <div class="col-md-2">
            <div class="stacktwo"> <img src="assets/images/IMG_7079.JPG" width="200" height="200" alt=""/> </div>
        </div>
        <div class="col-md-2">      
            <div class="stackthree"> <img src="assets/images/IMG_7079.JPG" width="200" height="200" alt=""/> </div> 
        </div>
        <div class="col-md-2">  
            <div class="stacktwo"> <img src="assets/images/IMG_7079.JPG" width="200" height="200" alt=""/> </div>
        </div>                      
    </div>  
</div>

<script type="text/javascript" src="assets/js/jquery.min.js"></script> 
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>

</body>
</html>

css与上述网站相同。

确定引导程序CSS冲突

0 个答案: