Почему рендеринг сайта не является адаптивным при использовании Bootstrap на странице aspx? - PullRequest
0 голосов
/ 05 сентября 2018

У меня есть страница, где я запускаю Bootstrap (через CDN) на странице aspx. Я могу запускать начальную загрузку просто отлично на рабочем столе. Однако в мобильном телефоне он не реагирует.

Страница: http://ecommerce.instituteforsupplymanagement.org/confreg/default.aspx

enter image description here

Я также пытался вызывать файлы ядра 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;
    }

Чего мне не хватает?

1 Ответ

0 голосов
/ 05 сентября 2018

В <head> отсутствуют некоторые необходимые метатеги. С начальной загрузки Bootstrap документация :

Bootstrap сначала разрабатывается для мобильных устройств - стратегия, в которой мы оптимизируем сначала код для мобильных устройств, а затем масштабировать компоненты как необходимо с помощью CSS медиа-запросов. Для обеспечения правильного рендеринга и масштабирование касанием для всех устройств, добавьте метатег адаптивного окна просмотра твой.

Добавьте следующие метатеги к <head>, чтобы обеспечить отзывчивость страницы. Скорее всего, вы добавите это в свой мастер-шаблон <%@ Master ... %>.

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

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...