ASP. Net Core MVC Razor с Bootstrap без изменения размера в мобильном браузере - PullRequest
Новая
       132

ASP. Net Core MVC Razor с Bootstrap без изменения размера в мобильном браузере

0 голосов
/ 07 августа 2020

Я разрабатываю приложение ASP. Net Core MVC с Bootstrap. Я всегда предполагал, что эти современные технологии, особенно Bootstrap, автоматически оптимизированы для мобильных устройств.

Я использую карты, но я также пробовал «col-md-3» x 4. Он отображает как ожидалось, когда я измените размер браузера на P C. Но в реальном мобильном браузере он по-прежнему отображается как страница рабочего стола.

Как видите, у меня есть метатег "viewport" в теге head. Я попытался выполнить поиск в Интернете и удивился, что, похоже, ни у кого нет этой проблемы.

_Layout.cs html

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />l
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>

Index.cs html

<div class="row">
    <div class="col-md-3 shadow p-3 mb-5 bg-white rounded" style="width: 18rem;">
        <img src="~/images/Art/art.jpg" class="card-img-top" style="width:200px;height:300px;" alt="...">
        <div class="card-body">
            <h5 class="card-title">#1</h5>
            <p class="card-text">Some text...</p>
        </div>
    </div>
    <div class="col-md-3 shadow p-3 mb-5 bg-white rounded" style="width: 18rem;">
        <img src="~/images/Art/art.jpg" class="card-img-top" style="width:200px;height:300px;" alt="...">
        <div class="card-body">
            <h5 class="card-title">#1</h5>
            <p class="card-text">Some text...</p>
        </div>
    </div>
    <div class="col-md-3 shadow p-3 mb-5 bg-white rounded" style="width: 18rem;">
        <img src="~/images/Art/art.jpg" class="card-img-top" style="width:200px;height:300px;" alt="...">
        <div class="card-body">
            <h5 class="card-title">#1</h5>
            <p class="card-text">Some text...</p>
        </div>
    </div>
    <div class="col-md-3 shadow p-3 mb-5 bg-white rounded" style="width: 18rem;">
        <img src="~/images/Art/art.jpg" class="card-img-top" style="width:200px;height:300px;" alt="...">
        <div class="card-body">
            <h5 class="card-title">#1</h5>
            <p class="card-text">Some text...</p>
        </div>
    </div>
</div>

Используя карточную колоду: 

<div class="card-deck mb-3 text-left">
        <div class="card">
            <div class="card-body" style="background-color:white">
                <div class="row">
                    <div class="card shadow p-3 mb-5 bg-white rounded" style="width: 18rem;">
                        <img src="~/images/Art/art1.jpg" class="card-img-top" style="width:200px;height:300px;" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">#1</h5>
                            <p class="card-text">Some text...</p>
                        </div>
                    </div>
                    <div class="card shadow p-3 mb-5 bg-white rounded" style="width: 18rem;">
                        <img src="~/images/Art/art1.jpg" class="card-img-top" style="width:200px;height:300px;" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">#1</h5>
                            <p class="card-text">Some text...</p>
                        </div>
                    </div>
                    <div class="card shadow p-3 mb-5 bg-white rounded" style="width: 18rem;">
                        <img src="~/images/Art/art1.jpg" class="card-img-top" style="width:200px;height:300px;" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">#1</h5>
                            <p class="card-text">Some text...</p>
                        </div>
                    </div>
                    <div class="card shadow p-3 mb-5 bg-white rounded" style="width: 18rem;">
                        <img src="~/images/Art/art1.jpg" class="card-img-top" style="width:200px;height:300px;" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">#1</h5>
                            <p class="card-text">Some text...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
...