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

如何在bootstrap中的图像顶部添加cols

1 个答案: