主页 / coding / 问题

问题[bootstrap-5](coding)

Martin Hope
spreaderman
Asked: 2024-12-14 15:16:42 +0800 CST
  • 5

我被难住了。这几乎就是我想要的，但还不完全是。以下是当前布局，但需要修复：

不正确

这是 bootstrap5 的 html：

<div class="container">
    <div class="row">
        <!-- New Top Section (12 columns wide) -->
        <div class="col-12 order-1">
            <div class="top-section p-3 border">
                <h3>Top Section</h3>
                <p>Content for the top section goes here.</p>
            </div>
        </div>
    </div>
    
    <div class="row">
        <!-- Weather Table -->
        <div class="col-12 col-lg-9 order-2">
            <div class="table-container p-3 border">
                <h3>Weather Table</h3>
                <p>Content for the weather table goes here.</p>
            </div>
        </div>

        <!-- Location Map -->
        <div class="col-12 col-lg-3 order-4 order-lg-3 d-flex flex-column">
            <div id="map" class="p-3 border" style="width: 100%; height: 100%; background-color: #eaeaea;">
                <h3>Location Map</h3>
                <p>Content for the location map goes here.</p>
                
            </div>
        </div>

        <!-- Elevation -->
        <div class="col-12 col-lg-9 order-3">
            <div class="elevation-container p-3 border">
                <h3>Elevation</h3>
                <p>Content for the elevation section goes here.</p>

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

我需要的是当位置图垂直增长时，海拔部分不会像现在这样向下移动。我搞不懂。

bootstrap-5
Martin Hope
gchq
Asked: 2024-11-26 18:07:43 +0800 CST
  • 5

各种表单都加载到模态中，保存的数据使用按钮文本（“保存”插入新记录，“更新”更新现有记录……）下面的代码片段中有两个按钮 - “插入”和“标准” - 当启动标准模态时，微调器可以工作，但当更改按钮文本时，微调器则无法工作。有什么想法可以解决这个问题吗？

$('#insertButton').on('click', function() {
  $('#testButton').text('Save');
  $('#testModal').modal('show');
})

$('#standardButton').on('click', function() {
  
  $('#testModal2').modal('show');
})
  
<
-<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>


<div class="container">
  <button type="button" id="insertButton">Insert</button>
  <button type="button" id="standardButton">Standard</button>
</div>





<div class="modal" id="testModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" id="testButton" class="btn btn-primary">
   <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>     
        </button>
      </div>
       </div>
  </div>
</div>


<div class="modal" id="testModal2" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" id="testButton2" class="btn btn-primary">
   <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>  
        Save
        </button>
      </div>

bootstrap-5
Martin Hope
Yaroslav Demchenko
Asked: 2024-06-04 13:24:37 +0800 CST
  • 5

我使用 XMLHttpRequest 从 jsonplaceholder 进行简单的渲染用户。我想为每个用户做弹出窗口。该弹出窗口将显示用户名、电子邮件、电话、网站。我不知道这是否可以称为错误。因为控制台不会显示任何错误，并且弹出窗口有时会起作用，但大多数情况下不会。没有可见的错误。我按照引导程序说明做所有事情。我将在下面发布代码。

我的 AJAX.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <title>AJAX</title>
  </head>
  <body>
    <h1>AJAX</h1>
    <button class="btn button btn-primary get-users-btn">Get Users</button>
    <div class="container"></div>
    <script src="AJAX.js"></script>
    <script src="renderUsers.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
      integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
      crossorigin="anonymous"
    ></script>
    <script>
      const popoverTriggerList = document.querySelectorAll(
        '[data-bs-toggle="popover"]'
      );
      const popoverList = [...popoverTriggerList].map(
        (popoverTriggerEl) => new bootstrap.Popover(popoverTriggerEl)
      );
    </script>
  </body>
</html>

我的 AJAX.js：

const btn = document.querySelector(".get-users-btn");
const container = document.querySelector(".container");

function getUsers(callback) {
  const request = new XMLHttpRequest();
  request.open("GET", "https://jsonplaceholder.typicode.com/users");
  request.addEventListener("load", () => {
    const response = JSON.parse(request.responseText);
    callback(response);
  });
  request.addEventListener("error", () => {
    console.log("error");
  });
  request.send();
}

getUsers((response) => {
  console.log(response);
});

我的 renderUsers.js：

function renderUsers(response) {
  const fragment = document.createDocumentFragment();
  response.forEach((user) => {
    const card = document.createElement("div");
    card.classList.add("card");
    const cardBody = document.createElement("div");
    cardBody.classList.add("card-body");

    const userBtn = document.createElement("button");
    userBtn.setAttribute("type", "button");
    userBtn.classList.add("btn", "btn-info", "btn-lg");
    userBtn.setAttribute("data-bs-toggle", "popover");
    userBtn.setAttribute(
      "data-bs-title",
      "Дополнительная информация про человека:"
    );
    userBtn.setAttribute("data-bs-content", `${user.username}`);

    const title = document.createElement("h5");
    title.classList.add("card-title");
    title.textContent = user.name;

    userBtn.appendChild(title);
    cardBody.appendChild(userBtn);
    card.appendChild(cardBody);
    fragment.appendChild(card);
  });
  container.appendChild(fragment);
}

btn.addEventListener("click", (e) => {
  getUsers(renderUsers);
});

在此输入图像描述 我变了

const userBtn = document.createElement("a")

到

const userBtn = document.createElement("button");

我使用实时服务器。当你点击名字的时候它不起作用，但有时我发现它起作用了，重启后它就不再起作用了。我不想问愚蠢的问题，但这对我来说只是某种魔法。谢谢

bootstrap-5
Martin Hope
nahoneyc
Asked: 2024-01-30 10:45:12 +0800 CST
  • 5

我有一个在 Bootstrap 5.3 上运行的网站，带有 Lightbox。当模式打开时，页面本身会滚动。我不知道如何解决这个问题，因此页面无法滚动。

这里的例子： 例子

我尝试更改模式全屏模式设置中的最大高度，但没有成功。

bootstrap-5