Question

我需要制作2个垂直对齐的表。

所以我做了2个div，其中一个是“col-lg-10”，另一个是“col-lg-5”

我认为它完全适用于1-Table和Half-Table

但它并不完全正常，它有点不同。

[col-lg-10 / col-lg-5]，我认为10正好是5的一半....

为什么不起作用？

<div class="table-responsive col-lg-10">
    <table class="table table-bordered">
        <tr>
            <td class="col-lg-1">ABC</td>
            <td class="col-lg-1">DEF</td>
            <td class="col-lg-2" style="word-break:break-all">FGGFGGFGGFGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGG</td>
            <td class="col-lg-1">342</td>
            <td class="col-lg-1">ABc</td>
            <td class="col-lg-1">DDF</td>
            <td class="col-lg-1">AvV</td>
            <td class="col-lg-1">DXZ</td>
            <td class="col-lg-1">QQW</td>
        </tr>
    </table>
</div>

<div class="table-responsive col-lg-5">
    <table class="table table-bordered">
        <tr>
            <td class="col-lg-2">ABC</td>
            <td class="col-lg-3">DEF</td>
        </tr>
    </table>
</div>

Result ScreenShot

Answer 1

check the image this is regarding col*

这里是修正后的代码，您可以根据需要更改偏移值

<div class="row">
    <div class="col-lg-10 col-md-10 col-md-10 offset-sm-1 col-sm-offset-2 col-md-offset-2">
<div class="table-responsive">
    <table class="table table-bordered">
        <tr class=row>
            <td class="col-lg-1">ABC</td>
            <td class="col-lg-1">DEF</td>
            <td class="col-lg-2" style="word-break:break-all">FGGFGGFGGFGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGG</td>
            <td class="col-lg-1">342</td>
            <td class="col-lg-1">ABc</td>
            <td class="col-lg-1">DDF</td>
            <td class="col-lg-1">AvV</td>
            <td class="col-lg-1">DXZ</td>
            <td class="col-lg-1">QQW</td>
            <td class="col-lg-1">QQW</td>
            <td class="col-lg-1">QQW</td>
        </tr>
    </table>
</div>
</div>
<div class="col-lg-5 offset-sm-4 ">
<div class="table-responsive">
    <table class="table table-bordered">
        <tr>
            <td class="col-lg-2">ABC</td>
            <td class="col-lg-3">DEF</td>
        </tr>
    </table>
</div>
</div>
</div>

我需要对齐相同大小的表（Bootstrap）

1 个答案: