Question

出于某种原因，我无法解决问题。我试图用表格填充父div，这意味着表格和父级是完全相同的宽度和高度。我尝试过使用填充和左拉，并没有成功。有什么输入吗？

HTML：

<div class="container">
    <div class="row">
        <div class="col-lg-4 vcenter">
            <div class="well">
                <center>
                    <img class="img-circle" src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/f7/f72a7e636d1b4831eb3d45cd9bcc893f7fccd8ae_full.jpg" width="120px" height="120px">
                     <h1>Welcome <strong>domkalan</strong> to Ozooma DarkRP</h1>

                </center>
            </div>
        </div>
        <div class="col-lg-4 vcenter">
            <div class="well">
                <div style="padding:0px; padding-left: ; width: 400px;">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                            </tr>
                            <tr>
                                <td>2</td>
                            </tr>
                            <tr>
                                <td>3</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-lg-4 vcenter">
            <div class="well">
                <div style="padding:0px; padding-left: ; width: 400px;">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                            </tr>
                            <tr>
                                <td>2</td>
                            </tr>
                            <tr>
                                <td>3</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

body {
    background: url("http://images8.alphacoders.com/374/374665.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.vcenter {
    margin-top: 15%;
}
.well {
    background: rgba(255, 255, 255, 0.6);
    width: 350px;
    min-height: 200px;
    max-height: 600px;
    border-radius: 25px;
    overflow: hidden;
}

Answer 1

它与具有div类的上层.well相关，这意味着它在bootstrap中有填充。

添加＆＃34; padding:0＆＃34;到div.well元素将消除表与其容器之间的差距。

Bootstrap表没有填充父级

1 个答案: