html - Bootstrap 轮播中图像顶部的表格

Question

我是 bootstrap 的新手，我遇到过这个问题。我想在我的旋转木马中有一个背景图片，我会在上面放一张 table 之类的内容。这是我到目前为止所写的内容。

 <div class="item active">
            <div class="row" id="redak1">
                <div class="col-md-offset-3 col-md-6" id="bg">
                    <div class="table-responsive">
                     <table class="table table-bordered" id="tabla">
                         <tr class="info">
                            <td>bla</td>
                            <td>bla</td>
                            <td>bla</td>
                            <td>bla</td>
                          </tr>

                        </table></div>
                 </div>
            </div>


        </div>

我的 CSS 是这样的:

#bg {

    height: 768px;
  }
#tabla {

  border:solid black;
  margin-top:150px;
  height:500px;
}

#redak1 {
  background-image:url('../img/grass.jpg');
  width:1024px;
  margin:auto;
}

.carousel table {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100%;
  max-width: none;
}

(包括所有的 div 标签和 carousel-inner 类，但我没有在这里发布)

此代码或多或少满足了我的要求，但存在一些问题。当我缩小浏览器窗口时，内容(图片和表格)不会随之缩放。我怎样才能让它发挥作用？我想有一种更好的方法可以做到这一点，但这是我设法做到的。任何帮助都很棒!

Answer 1

您的问题是您的 #redak1 元素的固定宽度。

这是一种实现您想要的东西的方法:

Bootstrap :http://www.bootply.com/120630

HTML:

 <div class="item active">
        <div class="container">
            <div class="col-md-offset-3 col-md-6" id="bg">
                <div class="table-responsive">
                 <table class="table table-bordered table-responsive" id="tabla">
                     <tbody><tr class="info">
                        <td>bla</td>
                        <td>bla</td>
                        <td>bla</td>
                        <td>bla</td>
                      </tr>

                    </tbody></table></div>
             </div>
        </div>
    </div>