html - 如何在 Bootstrap 中的图像顶部添加列

Question

拜托，我是 bootstrap 的新手。最近倾斜网格等。我正在尝试添加表格或图像顶部的控件，就像搜索和证明一样 here .仅从示例来看，我不希望整个站点位于图像之上。只有一排。

<div class='container-fluid'>
<div class='row' style='position:absolute; z-index=-1'>
   <img src='images/banner.jpg'  alt='Blast off with Bootstrap' />
</div>


 <!-- My other controls goes here, example my table etc. -->
</div>

<div class='container'>

 <!-- I dont like what ever is in this container to display on top the image above.-->
</div>

当我运行我的代码时，所有内容都显示在图像上，包括第二个容器。请问我如何存档？非常感谢任何帮助。

Answer 1

检查我提供的工作示例的这段代码

<div class='container-fluid'>
<div class='row banner'>
   <img src='http://images.visitcanberra.com.au/images/canberra_hero_image.jpg'  alt='Blast off with Bootstrap' />
    <div class="table-block">        
         <table>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Savings</th>
          </tr>
          <tr>
            <td>Peter</td>
            <td>Griffin</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>Lois</td>
            <td>Griffin</td>
            <td>$150</td>
          </tr>
        </table>        
    </div>
</div>
 <!-- My other controls goes here, example my table etc. -->
</div>

<div class='container'>

 <!-- I dont like what ever is in this container to display on top the image above.-->
</div>

CSS 代码:

 img{
        width:100%;
        height:200px;
    }
    table, td, th {
        border: 1px solid #111;
    }

    table {
        width: 400px;
    }
    .table-block{
        position:absolute;
        top:25px;
        left:25px;
    }
    .banner{position:relative;}

working example