Question

我对bootstrap很新，我遇到过这个问题。我希望在我的旋转木马上有一个背景图像，我会在其上放置像桌子等内容。这就是我到目前为止所写的内容。

 <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元素的固定宽度。

这是一种实现你想要的东西的方法：

Bootply ：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>

在一张图象顶部的表在bootstrap转盘

1 个答案: