时间戳

首页 > 解决方案 > 2张桌子不会互相放在一起

html - 2张桌子不会互相放在一起

问题描述

我正在尝试使用引导程序构建网站，但遇到了问题。在随附的屏幕截图中，您可以看到我有 2 张桌子在彼此下方，但我将这 2 张桌子放在彼此旁边。我尝试了各种变体，但似乎都没有奏效。

这是我当前的代码；

<div class="container-fluid">
  <div class="col-md-5">
    <h5>DIEREN</h5>
    <hr>
    <div class="card card-body">
      <a class="btn btn-primary  btn-sm btn-block" href="">Nieuw dier toevoegen</a>
      <table class="table table-sm">
        <tr>
          <th>Soort</th>
          <th>Naam</th>
          <th>Wijzigen</th>
          <th>Verwijderen</th>
          <th>Gegevens</th>
        </tr>
        <td></td>
        <td></td>
        <td><a class="btn btn-outline-info  btn-sm btn-block" href="">Wijzigen</a></td>
        <td><a class="btn btn-outline-danger  btn-sm btn-block" href="">Verwijderen</a></td>
        <td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>
      </table>
    </div>
    <br>
  </div>

  <div class="col-md-5">
    <h5>BEZOEKEN</h5>
    <hr>
    <div class="card card-body">
      <a class="btn btn-primary  btn-sm btn-block" href="">Nieuw bezoek inplannen</a>
      <table class="table table-sm">
        <tr>
          <th>Dier</th>
          <th>Brengen</th>
          <th>Halen</th>
          <th>Wijzigen</th>
          <th>Verwijderen</th>
          <th>Bevestiging</th>
        </tr>
        <td></td>
        <td></td>
        <td></td>
        <td><a class="btn btn-outline-info  btn-sm btn-block" href="">Wijzigen</a></td>
        <td><a class="btn btn-outline-danger  btn-sm btn-block" href="">Verwijderen</a></td>
        <td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>

      </table>
    </div>
  </div>
</div>

提前致谢。

在此处输入图像描述

标签： htmlcssbootstrap-4

解决方案

<div>用with 类包装两列row

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

<div class="container-fluid">
  <div class="row">
    <div class="col-md-5">
      <h5>DIEREN</h5>
      <hr>
      <div class="card card-body">
        <a class="btn btn-primary  btn-sm btn-block" href="">Nieuw dier toevoegen</a>
        <table class="table table-sm">
          <tr>
            <th>Soort</th>
            <th>Naam</th>
            <th>Wijzigen</th>
            <th>Verwijderen</th>
            <th>Gegevens</th>
          </tr>
          <td></td>
          <td></td>
          <td><a class="btn btn-outline-info  btn-sm btn-block" href="">Wijzigen</a></td>
          <td><a class="btn btn-outline-danger  btn-sm btn-block" href="">Verwijderen</a></td>
          <td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>
        </table>
      </div>
      <br>
    </div>

    <div class="col-md-5">
      <h5>BEZOEKEN</h5>
      <hr>
      <div class="card card-body">
        <a class="btn btn-primary  btn-sm btn-block" href="">Nieuw bezoek inplannen</a>
        <table class="table table-sm">
          <tr>
            <th>Dier</th>
            <th>Brengen</th>
            <th>Halen</th>
            <th>Wijzigen</th>
            <th>Verwijderen</th>
            <th>Bevestiging</th>
          </tr>
          <td></td>
          <td></td>
          <td></td>
          <td><a class="btn btn-outline-info  btn-sm btn-block" href="">Wijzigen</a></td>
          <td><a class="btn btn-outline-danger  btn-sm btn-block" href="">Verwijderen</a></td>
          <td><a class="btn btn-outline-success btn-sm btn-block" href="">Print</a></td>

        </table>
      </div>
    </div>
  </div>

推荐阅读