Question

我一直在尝试使用＆＃34;列＆＃34;来实现两个表。 Bootstarp中的类。
这是fiddle。

<head>
    <link rel="stylesheet" href="css/magnific-popup.css">
</head>
<body>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
</body>

问题：

当我使用column-md-8和column-md-4时，两个表的高度会发生变化，如何处理这个以及为什么会发生这种情况？
＆＃34; well＆＃34;对于表2中的1200px，类是错误的。

Answer 1

将<div class="container">更改为<div class="container-fluid">应解决1200px问题。请参阅bootstrap的CSS页面中的containers标题。

但是对于小尺寸我相信你的桌子比它的容器宽，因为它的内容就是它不适合那里的原因。

您可能会查找自适应表格选项，或者如果您对表格进行硬编码，则可能需要使用（.hidden-xs，.hidden-sm等隐藏某些列。）
您可以通过扩展列css class definiton来更改每个表填充每个屏幕大小的列数：

col-lg-6 col-md-6 col-sm-12 col-xs-12

所以我对这种情况的建议是（jsFiddle）：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Tables</title>
        <meta name="description" content="Hello World">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="well">
                        <table class="table table-hover">
                            <tr>
                                <td>
                                    <b>First name</b>
                                </td>
                                <td>
                                    <b>last name</b>
                                </td>
                                <td>
                                    <b>Age</b>
                                </td>
                                <td>
                                    <b>phone</b>
                                </td>
                                <td>
                                    <b>Address</b>
                                </td>
                                <td>
                                    <b>D.O.J</b>
                                </td>
                            </tr>
                            <tr class="info">
                                <td>Rohit</td>
                                <td>Sinha</td>
                                <td>22</td>
                                <td>211232</td>
                                <td>Kandivali</td>
                                <td>22/7/12</td>
                            </tr>
                            <tr class="danger">
                                <td>John</td>
                                <td>Smith</td>
                                <td>40</td>
                                <td>434560</td>
                                <td>Borivali</td>
                                <td>22/7/12</td>
                            </tr>
                            <tr class="default">
                                <td>Kartikeya</td>
                                <td>Gupta</td>
                                <td>40</td>
                                <td>403453</td>
                                <td>Kandivali</td>
                                <td>22/7/12</td>
                            </tr>
                            <tr class="danger">
                                <td>John</td>
                                <td>Smith</td>
                                <td>40</td>
                                <td>234540</td>
                                <td>Kandivali</td>
                                <td>22/7/12</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="well">
                        <table class="table table-hover">
                            <tr>
                                <td>
                                    <b>First name</b>
                                </td>
                                <td>
                                    <b>last name</b>
                                </td>
                                <td>
                                    <b>Age</b>
                                </td>
                                <td>
                                    <b>phone</b>
                                </td>
                                <td>
                                    <b>Address</b>
                                </td>
                                <td>
                                    <b>D.O.J</b>
                                </td>
                            </tr>
                            <tr class="info">
                                <td>Lalit</td>
                                <td>Bassi</td>
                                <td>22</td>
                                <td>211232</td>
                                <td>Kandivali</td>
                                <td>22/7/12</td>
                            </tr>
                            <tr class="danger">
                                <td>John</td>
                                <td>Smith</td>
                                <td>40</td>
                                <td>434560</td>
                                <td>Borivali</td>
                                <td>22/7/12</td>
                            </tr>
                            <tr class="default">
                                <td>Kartikeya</td>
                                <td>Gupta</td>
                                <td>40</td>
                                <td>403453</td>
                                <td>Kandivali</td>
                                <td>22/7/12</td>
                            </tr>
                            <tr class="danger">
                                <td>John</td>
                                <td>Smith</td>
                                <td>40</td>
                                <td>234540</td>
                                <td>Kandivali</td>
                                <td>22/7/12</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- Latest compiled and minified JavaScript -->
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </body>

</html>

Bootstrap中的表未正确对齐

1 个答案: