为什么在 aspx 页面中使用 Bootstrap 时网站呈现没有响应？答案

【问题标题】：Why isn't site rendering as responsive when using Bootstrap in aspx page?为什么在 aspx 页面中使用 Bootstrap 时网站呈现没有响应？
【发布时间】：2025-11-30 09:35:01
【问题描述】：

我在这里有一个页面，我在 aspx 页面上运行 Bootstrap（通过 CDN）。我可以在桌面上很好地运行引导程序。但是，在移动设备中，它没有响应。

页面：http://ecommerce.instituteforsupplymanagement.org/confreg/default.aspx

我也尝试在本地调用 Bootstrap 核心文件，但没有任何效果。

所有内容都包含在网络表单中。我通过 JavaScript 对象调用所有类。

    var j = document.getElementById("jval").value;
    var obj = JSON.parse(j);


    var DivCont = document.getElementById("DivCont");



    for (var i = 0; i < obj.length; i++)
    {
        var d = new Date(obj[i].StartDate);
        var sd = d.getMonth() + 1 + '-' + d.getDate() + '-' + d.getFullYear();
        var t = "";

        //alert(obj[i].ProdId)
        t += "<div class=\"row\">";
        t += "<div class='col-sm-12'>";
        t += "<div class='card no-bg no-border'>";
        t += "<div class='row'>";
        t += "<div class='col-lg-3 col-sm-12'>";

        t += "<ul class=\"list-group\">";
        t += "<li class=\"list-group-item date no-bg no-border text-uppercase\">";
        t += "<i class='fa fa-calendar'></i> Start Date: " + sd;
        t += "</li>";
        t += "<li class='list-group-item time no-bg no-border text-uppercase'>";
        t += "<i class='fa fa-clock-o'></i> Type: " + obj[i].SessionType;
        t += "</li>";
        t += "<li class='list-group-item speaker no-bg no-border text-uppercase'>";
        t += "<i class='fa fa-user'></i> Speaker: " + obj[i].LblName;
        t += "</li>";
        t += "</ul>";
        t += "</div>";
        t += "<div class='col-lg-9 col-sm-12'>";
        t += "<h4 class='card-header title-mlr-0 no-bg no-border text-black text-uppercase mt-3 mb-3'>";
        t += obj[i].SessionName;
        t += "</h4>";
        t += "<p class='card-text'>";
        t += obj[i].ShortDescr;
        t += "</p>";
        t += "</div>";

        t += "</div></div></div></div>";
        //alert(t)
        DivCont.innerHTML += t;
    }

我错过了什么？

【问题讨论】：

标签： javascript asp.net twitter-bootstrap bootstrap-4

【解决方案1】：

您在<head> 中缺少一些必需的元标记。从 Bootstrap 开始documentation:

Bootstrap 是首先在移动设备上开发的，这是我们优化的策略首先为移动设备编写代码，然后将组件扩展为有必要使用 CSS 媒体查询。为了确保正确的渲染和所有设备的触摸缩放，将响应式视口元标记添加到你的。

将以下元标记添加到 <head> 以帮助确保页面响应。您很可能会将其添加到您的主模板<%@ Master ... %>。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

希望对您有所帮助！

【讨论】：

那行得通。这就是我试图在前端开发人员和后端开发人员之间转变的结果。谢谢。