Блог

Я создал новое приложение в Asp.Net Основное приложение, использующее шаблон Razor Pages. Что я хочу сделать, так это расширить основной раздел на всю ширину экрана.

Я пробовал следующее (Index.cshtml):

 <div class="full-width shade">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
 

С помощью css:

 .shade {
    background-color: aqua;
}

.full-width {
    width: 100%;
}
 

Я также пробовал:

 .full-width {
    margin-left: 0px;
    margin-right: 0px;
}
 

И несколько других вариантов, но div, похоже, остается центрированным на экране. Глядя на инструменты разработчика, контейнер заполняет ширину, а <main> тег — нет.

Мой вопрос в том, как я могу изменить это так, чтобы ширина основного раздела всегда заполнялась до доступной ширины окна браузера, но при этом сохраняла функциональность, которую предоставляет bootstrap при работе с гораздо меньшим экраном?

как я могу изменить это так, чтобы ширина основного раздела всегда заполнялась до доступной ширины окна браузера, но при этом сохраняла функциональность, которую предоставляет bootstrap при работе с гораздо меньшим экраном?

Вы можете установить свойство контейнера body max-width 100% на странице макета. Пожалуйста, обратитесь к следующим шагам, чтобы обновить свой код.

На _Layout.cshtml странице (я предполагаю, что вы используете эту страницу макета): добавьте body-container атрибут класса.

 <div class="container body-container">
    <main role="main" class="pb-3">
        @RenderBody()
    </main>
</div>
 

Затем добавьте следующий стиль в Index.cshtml :

     <style>
        .shade {
            background-color: aqua;
        }

        .body-container {
            /*remove the container default padding attribute*/
            padding-left: 0px !important;
            padding-right: 0px !important;
            /*increase width as per your need*/
            max-width: 100%;
        } 
    </style>

    <div class="full-width shade">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    </div>
 

Результат такой:

Если не удалить атрибут заполнения контейнера по умолчанию, результат будет выглядеть следующим образом: