Bootstrap 4 - 将一个表放在另一个表下面并居中

问题描述 投票：0回答：1

我想让我的表格水平居中，并希望它们能一个一个地显示。使用bootstrap 4的一些类，我设法让表格显示得很不均匀，或者少了一个。这就是我为什么要寻求帮助的原因，我现在提供的代码中，两张表存在于一行中。

<div class="mt-3 d-flex justify-content-center">
        <div class="text-center p-2">
        <table class="table table-dark table-striped w-auto">  
        <thead>
            <tr class="bg-primary">
            <th>Przystanek</th>
            <th>(A)</th>     
            <th>(A)</th>   
            <th>(A)</th>   
            <th>(A)</th>   
            </tr>
        </thead>        
        <tbody>
            <tr>
            <th scope="row">Lidzbark Warmiński</th>
            <td>08:00</td>
            <td>12:00</td>
            <td>15:00</td>
            <td>19:00</td>
            </tr>
            <tr>
            <th scope="row">Kraszewo</th>
            <td>08:20</td>
            <td>12:20</td>
            <td>15:20</td>
            <td>19:20</td>
            </tr>
            <tr>
            <th scope="row">Dobre Miasto</th>
            <td>08:30</td>
            <td>12:30</td>
            <td>15:30</td>
            <td>19:30</td>
            </tr>
            <tr>
            <th scope="row">Olsztyn PKP</th>
            <td>09:00</td>
            <td>13:00</td>
            <td>16:00</td>
            <td>20:00</td>
            </tr>
        </tbody>
        </table>
        </div>  


        <div class="text-center p-2">
        <table class="table table-dark table-striped w-auto ">  
        <thead>
            <tr class="bg-primary">
            <th>Przystanek</th>
            <th>(A)</th>     
            <th>(A)</th>   
            <th>(A)</th>   
            <th>(A)</th>   
            </tr>
        </thead>        
        <tbody>
            <tr>
            <th scope="row">Olsztyn PKP</th>
            <td>09:00</td>
            <td>13:00</td>
            <td>17:00</td>
            <td>21:00</td>
            </tr>
            <tr>
            <th scope="row">Dobre Miasto</th>
            <td>09:30</td>
            <td>13:30</td>
            <td>17:30</td>
            <td>21:30</td>
            </tr>
            <tr>
            <th scope="row">Kraszewo</th>
            <td>09:50</td>
            <td>13:50</td>
            <td>17:50</td>
            <td>21:50</td>
            </tr>
            <tr>
            <th scope="row">Lidzbark Warmiński</th>
            <td>10:00</td>
            <td>14:00</td>
            <td>18:00</td>
            <td>22:00</td>
            </tr>
        </tbody>
        </table>
        </div>  
    </div>
css bootstrap-4 row center
1个回答
2
投票

你只需要将flex方向设置为列而不是行（这是默认的），然后对齐项目。在bootstrap中，这将是简单的 flex-column 和 align-items-center.

文档。https:/getbootstrap.comdocs4.4utilitiesflex。

还有这个div <div class="text-center p-2"> 是不需要的。只要把文本中心设置在表格上就可以了。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="mt-3 d-flex align-items-center flex-column">
    <table class="table table-dark table-striped w-auto text-center m-2">  
        <thead>
            <tr class="bg-primary">
            <th>Przystanek</th>
            <th>(A)</th>     
            <th>(A)</th>   
            <th>(A)</th>   
            <th>(A)</th>   
            </tr>
        </thead>        
        <tbody>
            <tr>
            <th scope="row">Lidzbark Warmiński</th>
            <td>08:00</td>
            <td>12:00</td>
            <td>15:00</td>
            <td>19:00</td>
            </tr>
            <tr>
            <th scope="row">Kraszewo</th>
            <td>08:20</td>
            <td>12:20</td>
            <td>15:20</td>
            <td>19:20</td>
            </tr>
            <tr>
            <th scope="row">Dobre Miasto</th>
            <td>08:30</td>
            <td>12:30</td>
            <td>15:30</td>
            <td>19:30</td>
            </tr>
            <tr>
            <th scope="row">Olsztyn PKP</th>
            <td>09:00</td>
            <td>13:00</td>
            <td>16:00</td>
            <td>20:00</td>
            </tr>
        </tbody>
        </table>

    <table class="table table-dark table-striped w-auto text-center m-2">  
        <thead>
            <tr class="bg-primary">
            <th>Przystanek</th>
            <th>(A)</th>     
            <th>(A)</th>   
            <th>(A)</th>   
            <th>(A)</th>   
            </tr>
        </thead>        
        <tbody>
            <tr>
            <th scope="row">Olsztyn PKP</th>
            <td>09:00</td>
            <td>13:00</td>
            <td>17:00</td>
            <td>21:00</td>
            </tr>
            <tr>
            <th scope="row">Dobre Miasto</th>
            <td>09:30</td>
            <td>13:30</td>
            <td>17:30</td>
            <td>21:30</td>
            </tr>
            <tr>
            <th scope="row">Kraszewo</th>
            <td>09:50</td>
            <td>13:50</td>
            <td>17:50</td>
            <td>21:50</td>
            </tr>
            <tr>
            <th scope="row">Lidzbark Warmiński</th>
            <td>10:00</td>
            <td>14:00</td>
            <td>18:00</td>
            <td>22:00</td>
            </tr>
        </tbody>
    </table>
</div>
2
投票

你为什么不改变一下你的布局呢？你可以把每个表格放在一个列里面 col-12 而第二个表格将被放置在第一个表格的下方。这就是bootstrap布局的工作方式，你不需要额外的类来将表格居中。更重要的是--你可以通过改变列来调整表格的宽度，例如将其改为 col-md-8. 你可以使用偏移类 offset-* 使它们水平居中。

这里有Bootstrap DOCS。https:/getbootstrap.comdocs4.5getting-startedintroduction。

/*DEMO*/body{padding:3rem}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">


<div class="row">
  <div class="col-12 mb-5">
    <table class="table table-dark table-striped">
      <thead><tr class="bg-primary"><th>Przystanek</th><th>(A)</th><th>(A)</th><th>(A)</th><th>(A)</th></tr></thead><tbody><tr><th scope="row">Lidzbark Warmiński</th> <td>08:00</td><td>12:00</td><td>15:00</td><td>19:00</td></tr><tr><th scope="row">Kraszewo</th><td>08:20</td><td>12:20</td><td>15:20</td><td>19:20</td></tr><tr><th scope="row">Dobre Miasto</th><td>08:30</td><td>12:30</td><td>15:30</td><td>19:30</td></tr><tr><th scope="row">Olsztyn PKP</th><td>09:00</td><td>13:00</td><td>16:00</td><td>20:00</td></tr></tbody>
    </table>
  </div>
  <div class="col-8 offset-2">
    <table class="table table-dark table-striped">
      <thead><tr class="bg-primary"><th>Przystanek</th><th>(A)</th><th>(A)</th><th>(A)</th><th>(A)</th></tr></thead><tbody><tr><th scope="row">Olsztyn PKP</th><td>09:00</td><td>13:00</td><td>17:00</td><td>21:00</td></tr><tr><th scope="row">Dobre Miasto</th><td>09:30</td><td>13:30</td><td>17:30</td><td>21:30</td></tr><tr><th scope="row">Kraszewo</th><td>09:50</td><td>13:50</td><td>17:50</td><td>21:50</td></tr><tr><th scope="row">Lidzbark Warmiński</th><td>10:00</td><td>14:00</td><td>18:00</td><td>22:00</td></tr></tbody>
    </table>
  </div>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.