Question

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

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

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

所有内容都汇总到一个Web表单中。我正在通过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;
    }

我想念什么？

Answer 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">

希望有帮助！

在ASPX页面中使用Bootstrap时，为什么网站渲染没有响应性？

1 个答案: