Question

我正在使用Bootstrap 3开发一个网站，除了我尝试使用CSS3框阴影外，一切似乎都有效。

我想要实现的是在整个内容div的左侧和右侧都有框阴影。这很好用。我还想在一些内容项上有一个盒子阴影，比如侧边栏中的div，但是如果我在主要内容容器上有盒子阴影，那么对其他内容项不起作用。如果我删除主内容容器上的box shadow类，其余的都可以工作。

如果我删除了这个div <div class="box outer">，则所有其他框阴影都可以正常工作，但是如果这样，那么它们就不会显示。

任何有关确定我不能同时使用两个框阴影的帮助都将不胜感激

更新在Bootply http://www.bootply.com/ULX2kATkT8上看到了它的样子，我刚刚给.outer增加了一个宽度，宽度为1000px，我可以看到所有阴影都可见，但它看起来像{{ 1}}阴影会覆盖其他人

这是我的模板

.outer

然后是我的css

<!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>

Answer 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; 
}

CSS3框阴影和Bootstrap 3

1 个答案: