Je suis en train de développer un site utilisant Bootstrap 3 et tout semble fonctionner sauf lorsque j'essaie d'utiliser les ombres en boîte CSS3.Ombres de boîte CSS3 et Bootstrap 3
Ce que je veux réaliser est d'avoir des ombres de boîte à gauche et à droite de tout le contenu div. Cela fonctionne bien. Je veux aussi une ombre de boîte sur certains éléments de contenu tels que les divs dans la barre latérale mais si j'ai des ombres de boîte sur le conteneur de contenu principal, cela ne fonctionne pas pour les autres. Si je supprime la classe shadow box sur le conteneur de contenu principal, les autres fonctionnent tous.
Si je supprime ce div <div class="box outer">, toutes les autres ombres de boîte fonctionnent mais si elles sont présentes, elles n'apparaissent pas.
Toute aide à identifier pourquoi je ne peux pas utiliser la boîte ombres à la fois, une fois serait apprécié
MISE À JOUR: Vous avez une démo sur Bootply http://www.bootply.com/ULX2kATkT8 de quoi il ressemble, je viens d'ajouter une largeur à .outer étant donné une largeur de 1000px et je peux voir que les deux toutes les ombres sont visibles, mais il ressemble à l'ombre les autres .outer écrase
Voici mon modèle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Set the viewport so this responsive site displays correctly on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 Responsive Design</title>
<!-- Include bootstrap CSS -->
<link href="http://localhost/app/public/css/bootstrap.min.css" rel="stylesheet">
<link href="http://localhost/app/public/css/custom.css" rel="stylesheet">
<link href="css/media.css" rel="stylesheet">
</head>
<body>
<div class="box outer">
<!-- Site header and navigation -->
<header class="top" role="header">
<div class="container">
<img class="img-responsive" src="logo.png">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</header>
<!-- Site banner -->
<div class="banner">
<div class="container">
<div class="box contentimg">
<img class="img-responsive" src="http://localhost/app/public/images/layout/index.png" alt="">
</div>
</div>
</div>
<!-- Middle content section -->
<div class="middle">
<div class="container">
<!-- Main Content section -->
<div class="col-md-8 content">
</div>
<!-- End Main Content section -->
<!-- Sidebar Content section -->
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="box sidebar_item">
<div class="sidebar_item_head"><h3>Events Planner</h3></div>
<div class="sidebar_item_main">
</div>
</div>
</div>
</div>
</div>
<!-- Site footer -->
<div class="bottom">
<div class="container">
<div class="col-md-4">
<p>Content for the first footer section.</p>
</div>
<div class="col-md-4">
<p>Content for the second footer section.</p>
</div>
<div class="col-md-4">
<p>Content for the third footer section.</p>
</div>
</div>
</div>
</div>
<!-- Include jQuery and bootstrap JS plugins -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://localhost/app/public/js/bootstrap.min.js"></script>
<script src="http://localhost/app/public/js/bootbox.min.js"></script>
</body>
</html>
suivi de mon css
.box {
position:relative;
background:#f1f1f1;
margin:0 10px;
}
.box:before, .box:after {
position:absolute;
z-index:-1;
content:"";
}
.outer {
margin-top:20px;
margin-bottom:20px;
margin-left: auto;
margin-right: auto;
}
.contentimg {
background-color: #fff;
border: 1px solid #ccc;
padding: 5px;
width: 100%;
}
.sidebar_item {
margin: 40px auto;
width: 310px;
}
.outer:before,
.outer:after {
top:0;
width:100%;
height: 100%;
border-radius:2%/100%;
-moz-border-radius:2%/100%;
-webkit-border-radius:2%/100%;
box-shadow:-10px 0 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow:-10px 0 7px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:-10px 0 7px rgba(0,0,0, 0.3);
}
.outer:before{
box-shadow:10px 0 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow:10px 0 7px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:10px 0 7px rgba(0,0,0, 0.3);
}
.sidebar_item:before,
.sidebar_item:after,
.contentimg:before,
.contentimg:after {
bottom:12px;
left:5px;
width:50%;
top:80%;
max-width:300px;
-webkit-box-shadow:0 15px 7px rgba(0,0,0, 0.35);
-moz-box-shadow:0 15px 7px rgba(0, 0, 0, 0.3);
box-shadow:0 15px 7px rgba(0, 0, 0, 0.3);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.sidebar_item:after,
.contentimg:after {
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
-ms-transform:rotate(3deg);
transform:rotate(3deg);
right:5px;
left:auto;
}
Pouvez-vous mettre en place une démo sur http://www.bootply.com/? – Turnip
@ 3rror404, je viens d'ajouter un lien à Bootply – AdRock
L'index z de -1 sur elle l'empêche de s'afficher du tout. Il est probablement sûr de dire que vous avez besoin de cette boîte dans le parent et les pseudos imbriqués un peu plus bas plutôt que sur la boîte. – Aibrean