如何用 bootstrap 中的 img 在另一个 div 上重叠一些 div？

Question

我想在 jumbotron 上有图像，在这个图像上有一些来自 bootstrap 的按钮和一些其他 div 当然还有 bootstrap（我的日历）。我想创建完全响应的页面，所以在计算机版本之后我将为手机创建版本。我不想变成这样 http://postimg.org/image/nmdsbws6d/ 感谢大家的回复

<html> 
<head>
<title>calendar</title>
<!--STYLES-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.js"></script>

<link rel="shortcut icon" type="images/ico" href="media/img/favicon.ico"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css">

.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
</style>
</head>
<body>
<br><br><br><br>
<center>
    <div class="jumbotron" style="background:url() no-repeat scroll center center / cover;">
        <div class="container transparent" style="background-color: rgba(255, 255, 255, 0.6); padding:60px;">
            <div class="row" style="background:url(<?php echo asset_url();?>media/img/tro.jpg) no-repeat center; height: 100%; width: 100%;">
              <!-- now this row is outside img-->
                    <div class ="col-md-2  calendarbox1">
                        
                    </div>
     
                    <div class ="col-md-1 " >
                       <img src="<?php echo asset_url();?>media/img/kalendarz/pon.png" style="height: 60px;">
                    </div>
     
                    <div class ="col-md-1 ">
                        <img src="<?php echo asset_url();?>media/img/kalendarz/wto.png"  style="height: 60px">
                    </div>
   
     
                    <div class ="col-md-1 ">
                        <img src="<?php echo asset_url();?>media/img/kalendarz/sro.png" style="height: 60px">
                    </div>
   
     
                    <div class ="col-md-1 ">
                        <img src="<?php echo asset_url();?>media/img/kalendarz/czw.png" style="height: 60px">
                    </div>
   
     
                    <div class ="col-md-1 ">
                        <img src="<?php echo asset_url();?>media/img/kalendarz/pia.png" style="height: 60px">
                    </div>
   
     
                    <div class ="col-md-1 ">
                        <img src="<?php echo asset_url();?>media/img/kalendarz/sob.png" style="height: 60px">
                    </div>
   
     
                    <div class ="col-md-1 col-centered">
                        <img src="<?php echo asset_url();?>media/img/kalendarz/niedz.png" style="height: 60px">
                    </div>
   
     
                    <div class ="col-md-3 col-centered calendarbox1">
                        
                    </div>

                 
                <!--   
                <div class="button-container">
                    <div class="btn btn-default" >Button</div>
                    <div class="btn btn-default">Button</div>
               </div> -->
            </div>  
        </div>     
    </div>
</body>
</html>

Answer 1

如果您只是想弄清楚如何将图像作为背景。您可以将它作为背景添加到超大屏幕本身。

<div class="jumbotron container" style="background:url(http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg) no-repeat scroll center center / cover; height:600px;'">

我在下面编辑了您的代码。样式与您发布的图像不完全相同。但我相信这回答了你的问题。

编辑：根据您在下面的评论，我已经编辑了代码，这似乎更接近您想要的。

<html> 
    <head>
    <title>calendar</title>
    <!--STYLES-->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.js"></script>

    <link rel="shortcut icon" type="images/ico" href="media/img/favicon.ico"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css">
    .calendarbox{
    border: 2px solid gray;
    width: 70px;
    height: 60px;
    }
    .calendarbox1{
    border: 3px solid ;
    display: none;
    }
    </style>
    </head>
    <body>
    <br><br><br><br>
    <center>
        <div class="jumbotron" style="background:url(http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg) no-repeat scroll center center / cover;">
            <div class="container transparent" style="background-color: rgba(255, 255, 255, 0.6); padding:60px;">
                <div class="myimage" style="background:url(http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg) no-repeat scroll center center / cover; height:600px;">
                    <div class="row">
                        <div class ="col-md-1 col-centered ">
                            <div class="calendarbox1"></div>
                        </div>

                        <div class ="col-md-1 col-centered">
                            <div class="calendarbox1"></div>
                        </div>
         
                        <div class ="col-md-1 col-centered">
                            <div class="calendarbox"></div>
                        </div>
         
                        <div class ="col-md-1 col-centered">
                            <div class="calendarbox"></div>
                        </div>
         
                        <div class ="col-md-1 col-centered">
                            <div class="calendarbox"></div>
                        </div>
         
                         <div class ="col-md-1 col-centered">
                            <div class="calendarbox"></div>
                        </div>
         
                        <div class="col-md-1 col-centered ">
                            <div class="calendarbox"></div>
                        </div>
         
                         <div class ="col-md-1 col-centered">
                            <div class="calendarbox"></div>
                        </div>
         
                         <div class ="col-md-1 col-centered">
                            <div class="calendarbox"></div>
                        </div>
         
                         <div class ="col-md-1 col-centered">
                            <div class="calendarbox1"></div>
                        </div>
         
                        <div class ="col-md-1 col-centered">
                            <div class="calendarbox1"></div>
                        </div>
         
                        <div class ="col-md-1 col-centered">
                            <div class="calendarbox1"></div>
                        </div>
                    </div>    
                    <div class="button-container">
                        <div class="btn btn-default" >Button</div>
                        <div class="btn btn-default">Button</div>
                   </div> 
                </div>  
            </div>     
        </div>
</body>
</html>

如何用 bootstrap 中的 img 在另一个 div 上重叠一些 div？

How to overlap some divs on another div with img in bootstrap?

html

css

positioning

twitter-bootstrap