我需要将表与相同大小对齐(Bootstrap)

Question

我需要使2个表与垂直对齐。

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

我认为它适用于1-表和半表

但它并不完全起作用，它有一点不同。

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>

​