#twitter-bootstrap-3 #css
#twitter-bootstrap-3 #css
Вопрос:
Я разрабатываю сайт с использованием Bootstrap 3, и, кажется, все работает, за исключением случаев, когда я пытаюсь использовать CSS3 box shadows.
Чего я хочу добиться, так это наличия теней слева и справа от всего содержимого div. это работает нормально. я также хочу, чтобы на некоторых элементах содержимого, таких как divs на боковой панели, была тень от окна, но если у меня есть тени от окна в основном контейнере содержимого, это не работает для других. Если я удалю класс box shadow в основном контейнере содержимого, все остальные будут работать.
Если я удалю этот div <div class="box outer"> , все остальные боковые тени будут работать, но если это включено, то они не отображаются.
Буду признателен за любую помощь в определении того, почему я не могу использовать обе боковые тени одновременно
ОБНОВЛЕНИЕ: есть демонстрация на Bootply http://www.bootply.com/ULX2kATkT8 из того, как это выглядит, я просто добавил ширину, чтобы .outer придать ей ширину 1000 пикселей, и я вижу, что видны обе все тени, но похоже .outer , что тень перезаписывает остальные
Вот мой шаблон
<!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>
затем следует мой 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;
}
Комментарии:
1. Не могли бы вы настроить демонстрацию на bootply.com ?
2. @3rror404, я только что добавил ссылку на Bootply
3. Z-индекс -1 на нем приводит к тому, что он вообще не отображается. Вероятно, можно с уверенностью сказать, что вам нужно, чтобы это поле было в родительском, а псевдонимы были вложены немного дальше, а не в поле.
Ответ №1:
Я знал, что z-index имеет к этому какое-то отношение, поскольку я мог видеть тень окна, если бы я дал .outer div ширину.
Я исправил это, добавив это в свой css
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12,
.col-lg-12 {
z-index: 0;
}