如何修复Bootstrap 5.2上此日历表的响应性？

发布于 2025-01-31 10:54:47 字数 6225 浏览 5 评论 0原文

在这里，HTML代码也可以使用Bootstrap在这些桌子上放置一个圆形边框？如果有人可以帮助我解决这种情况，我将真的很高兴。我已经打字了，但是Stackoverflow不允许我问询问！ /snif

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="/assets/css/calendar.css" />
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-2 bg-secondary">
          <div class="dropdown">
            <button
              class="btn btn-primary dropdown-toggle"
              type="button"
              id="dropdown"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              Dropdown
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdown">
              <li><a class="dropdown-item" href="#">Dropdown item</a></li>
              <li><a class="dropdown-item" href="#">Dropdown item</a></li>
              <li><a class="dropdown-item" href="#">Dropdown item</a></li>
            </ul>
          </div>
        </div>
        <div class="col-md-10 col-xs-12">
          <div class="row">
            <div class="col-12 col-sm-12 bg-primary">
              <!-- Código Calendar -->
              <h2>Calendar</h2>
              <table class="table text-center table-hover table-bordered table-responsive">
                <thead>
                  <tr class="bg-success">
                    <th class="col-1" scope="col">#</th>
                    <th class="col-1" scope="col">Monday</th>
                    <th class="col-1" scope="col">Tuesday</th>
                    <th class="col-1" scope="col">Wednesday</th>
                    <th class="col-1" scope="col">Thursday</th>
                    <th class="col-1" scope="col">Friday</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">09:00</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <th scope="row">09:30</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <th scope="row">10:00</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                </tbody>
              </table>
              <!-- Código Calendar -->
            </div>
            <div class="col-12 col-sm-12 bg-success">
              <h2>History</h2>
              <table class="table table-dark table-hover">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                  </tr>
                  <tr>
                    <th scope="row">3</th>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
      integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

这是表格问题不适合容器上的图像！代码img

原文

Here the html code, Also if anyone could, How Could I put a Rounded Border on these tables using bootstrap? I will be really greatful if someone could help me on this situation. I am over typing but the stackoverflow didnt allow me to ask the quention! /snif

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="/assets/css/calendar.css" />
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-2 bg-secondary">
          <div class="dropdown">
            <button
              class="btn btn-primary dropdown-toggle"
              type="button"
              id="dropdown"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              Dropdown
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdown">
              <li><a class="dropdown-item" href="#">Dropdown item</a></li>
              <li><a class="dropdown-item" href="#">Dropdown item</a></li>
              <li><a class="dropdown-item" href="#">Dropdown item</a></li>
            </ul>
          </div>
        </div>
        <div class="col-md-10 col-xs-12">
          <div class="row">
            <div class="col-12 col-sm-12 bg-primary">
              <!-- Código Calendar -->
              <h2>Calendar</h2>
              <table class="table text-center table-hover table-bordered table-responsive">
                <thead>
                  <tr class="bg-success">
                    <th class="col-1" scope="col">#</th>
                    <th class="col-1" scope="col">Monday</th>
                    <th class="col-1" scope="col">Tuesday</th>
                    <th class="col-1" scope="col">Wednesday</th>
                    <th class="col-1" scope="col">Thursday</th>
                    <th class="col-1" scope="col">Friday</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">09:00</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <th scope="row">09:30</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <th scope="row">10:00</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                </tbody>
              </table>
              <!-- Código Calendar -->
            </div>
            <div class="col-12 col-sm-12 bg-success">
              <h2>History</h2>
              <table class="table table-dark table-hover">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                  </tr>
                  <tr>
                    <th scope="row">3</th>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
      integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Here is the image of the problem of the table that doesn't fit on the container!
code img

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

葬心 2025-02-07 10:54:47

看起来您已经阅读了 documentation ，但没有了解如何正确使用.table响应。如果向下滚动，您会看到您需要在这样的.table响应中包裹桌子：

<div class="table-responsive">
    <table class="table text-center table-hover table-bordered">
        <!-- Content -->
    </table>
</div>

为了添加圆形边界，我找到了这个答案应该有所帮助。似乎您将遇到的问题是Bootstrap使用“边界崩溃：崩溃”，它会干扰圆角。

It looks like you have read the documentation, but didn't understand how to use .table-responsive correctly. If you scroll down, you can see that you need to wrap your table in a .table-responsive like this:

<div class="table-responsive">
    <table class="table text-center table-hover table-bordered">
        <!-- Content -->
    </table>
</div>

As for adding rounded borders, I found this answer that should help. It seems like the problem you will have is bootstrap uses 'border-collapse:collapse' which interferes with the rounded corners.

回复收藏 0 原文

~没有更多了~