У меня есть сайт asp.net, на котором я пытаюсь использовать bootstrap 4.6.1.
У меня есть 2 страницы, которые используют одну и ту же главную страницу. Когда я перехожу от одной страницы к другой, контейнер немного смещается вправо. Если контейнер определен одинаково для обеих страниц, почему он смещается?
Может ли проблема заключаться в содержимом? Если да, то как сделать так, чтобы контейнер был одинаковым для всех страниц?
Ниже показана главная страница и 2 страницы, которые используют ее, и контейнер смещается при переходе от страницы 1 к странице 2.
Главная страница
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="" crossorigin="anonymous">
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<style type="text/css">
.pagetext_header_default {
font-weight:bold;
font-family: open-sans, sans-serif;
font-size: 16px;
}
.pagetext_header {
color:#2f65a7;
font-weight:bold;
font-family: open-sans, sans-serif;
font-size: 16px;
}
.pagetext {
font-family: open-sans, sans-serif;
font-size: 16px;
}
.round_text {
background-color: #00274c;
}
.round_text_lightblue {
background-color: #2f65a7;
}
/*DESKTOP CSS*/
@media only screen and (min-device-width: 768px) {
nav {
bottom: 0;
}
.navbar-nav {
background-color: #224474;
bottom: 0;
width: 910px;
height: 40px;
}
.li_format {
font-family: open-sans, sans-serif;
font-size: 20px;
}
.MenuFormat {
font-family: open-sans, sans-serif;
color: white !important;
font-weight: 700;
font-size: 24px;
}
.ContactMenu {
font-family: open-sans, sans-serif;
color: white !important;
font-weight: 700;
font-size: 20px;
padding-left: 250px !important;
white-space: nowrap;
overflow: hidden;
}
.ImgText {
font-family: open-sans, sans-serif;
color: white;
font-weight: 600;
display:inline-block;
width:100%;
text-align:center;
justify-content:center;
padding:10px;
}
.hometext {
font-family: open-sans, sans-serif;
font-size: 16px;
}
.LangDDL {
position:relative;
top:10px;
left:1000px;
}
}
/*NOT DESKTOP OR LAPTOP*/
@media only screen and (max-width: 600px) {
nav {
top: 65px;
right: 0;
bottom: unset;
}
.navbar-nav {
bottom: 0;
width: 350px;
}
.li_format {
font-family: open-sans, sans-serif;
font-size: 14px;
}
.MenuFormat {
font-family: open-sans, sans-serif;
font-weight: 700;
font-size: 20px;
text-align: left;
}
.ContactMenu {
font-family: open-sans, sans-serif;
font-weight: 700;
font-size: 20px;
}
.ImgText {
font-family: open-sans, sans-serif;
color: white;
font-weight: 600;
display: inline-block;
width: 100%;
text-align: center;
justify-content: center;
padding: 10px;
}
.HomeImgText {
font-family: open-sans, sans-serif;
color: #224474;
display: inline-block;
width: 100%;
text-align: center;
justify-content: center;
padding: 10px;
}
.hometext {
font-family: open-sans, sans-serif;
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
text-align: center;
justify-content: center;
padding: 10px;
}
}
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />
.
.
.
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<div class="container" style="border:solid;border-width:thin;padding:0;">
<div class="position-relative">
<!-- MENU - START -->
<nav class="navbar navbar-light navbar-expand-sm bg-light position-absolute" style="z-index:100;padding:0!important;line-height:1.0;">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#NewNavBar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="NewNavBar" >
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link MenuFormat" href="default.aspx" role="button" aria-expanded="false" >
<asp:Label ID="lbl0thMenuTop" runat="server" />
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle MenuFormat" href="#" id="nddNew" role="button" data-toggle="dropdown" aria-expanded="false">
<asp:Label ID="lbl1stMenuTop" runat="server" />
</a>
<div class="dropdown-menu" aria-labelledby="nddNew">
<a class="dropdown-item li_format" href="New.aspx"><asp:Label ID="lbl1stMenuTopSub1" runat="server" /></a>
<a class="dropdown-item li_format" href="Newsletter.aspx"><asp:Label ID="lbl1stMenuTopSub2" runat="server" /></a>
<a class="dropdown-item li_format" href="News2.aspx"><asp:Label ID="lbl1stMenuTopSub3" runat="server" /></a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle MenuFormat" href="#" id="nddAbout" role="button" data-toggle="dropdown" aria-expanded="false">
<asp:Label ID="lbl2ndMenuTop" runat="server" />
</a>
<div class="dropdown-menu" aria-labelledby="nddAbout">
<a class="dropdown-item li_format" href="Pledge.aspx"><asp:Label ID="lbl2ndMenuTopSub1" runat="server" /></a>
<a class="dropdown-item li_format" href="Dir.aspx"><asp:Label ID="lbl2ndMenuTopSub2" runat="server" /></a>
<a class="dropdown-item li_format" href="FAQ.aspx"><asp:Label ID="lbl2ndMenuTopSub3" runat="server" /></a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle MenuFormat" href="#" id="nddOld" role="button" data-toggle="dropdown" aria-expanded="false">
<asp:Label ID="lbl3rdMenuTop" runat="server" />
</a>
<div class="dropdown-menu" aria-labelledby="nddOld">
<a class="dropdown-item li_format" href="Old.aspx"><asp:Label ID="lbl3rdMenuTopSub1" runat="server" /></a>
<a class="dropdown-item li_format" href="OldMat.aspx"><asp:Label ID="lbl3rdMenuTopSub2" runat="server" /></a>
<a class="dropdown-item li_format" href="OldNews.aspx"><asp:Label ID="lbl3rdMenuTopSub3" runat="server" /></a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle MenuFormat" href="#" id="nddMed" role="button" data-toggle="dropdown" aria-expanded="false">
<asp:Label ID="lbl4thMenuTop" runat="server" />
</a>
<div class="dropdown-menu" aria-labelledby="nddMed">
<a class="dropdown-item li_format" href="Med.aspx"><asp:Label ID="lbl4thMenuTopSub1" runat="server" /></a>
<a class="dropdown-item li_format" href="MedMat.aspx"><asp:Label ID="lbl4thMenuTopSub2" runat="server" /></a>
<a class="dropdown-item li_format" href="MedNews.aspx"><asp:Label ID="lbl4thMenuTopSub3" runat="server" /></a>
</div>
</li>
<li class="nav-item">
<a class="nav-link ContactMenu" aria-current="page" href="Contact.aspx"> <asp:Label ID="lbl5thMenuTop" runat="server" /></a>
</li>
</ul>
</div>
</nav>
<!-- MENU - END -->
<img src="images/Banner.png" class="mx-auto img-fluid" style="height:auto;" />
</div>
<div class="LangDDL">
<asp:DropDownList ID="ddLang" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddLang_SelectedIndexChanged">
<asp:ListItem Value="en-US" Text="English " />
<asp:ListItem Value="es-ES" Text="Español " />
</asp:DropDownList>
</div>
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>
Страница 1
<%@ Page Title="Home" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<br />
<div class="row">
<div class="col">
<img src="images/Homepage_banner_wtext.png" class="mx-auto d-flex img-fluid" />
</div>
</div>
<div class="row">
<div class="col-lg-4"><img src="images/darkblue/calendar.gif" class="mx-auto d-flex img-fluid" /></div>
<div class="col-lg-4"><img src="images/darkblue/families.gif" class="mx-auto d-flex img-fluid" /> </div>
<div class="col-lg-4"><img src="images/darkblue/pubs.gif" class="mx-auto d-flex img-fluid" /> </div>
</div>
<div class="row">
<div class="col-lg-4 text-center"><asp:Label ID="lblHomeImg1Text" runat="server" class="HomeImgText" /></div>
<div class="col-lg-4 text-center"><asp:Label ID="lblHomeImg2Text" runat="server" class="HomeImgText" /></div>
<div class="col-lg-4 text-center"><asp:Label ID="lblHomeImg3Text" runat="server" class="HomeImgText" /></div>
</div>
<div class="row">
<div class="col-lg-12"><asp:Label ID="lblHomeText" runat="server" /></div>
</div>
</asp:Content>
Страница 2
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Temp.aspx.cs" Inherits="Temp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div class="d-flex flex-xl-row flex-column" style="justify-content:space-evenly;">
<div style="align-self:center;">
<div class="d-flex flex-xl-row flex-column" style="justify-content:space-evenly;">
<img src="images/darkblue/materials.gif" class="img-responsive" /><br />
</div>
<div class="rounded-pill round_text">
<a href="Newsletter.aspx"><asp:Label ID="lblImg1Text" runat="server" class="ImgText" /></a>
</div>
</div>
<div style="align-self:center;">
<div class="d-flex flex-xl-row flex-column" style="justify-content:space-evenly;">
<img src="images/darkblue/news.gif" class="img-responsive" />
</div>
<div class="rounded-pill round_text">
<a href="News.aspx"><asp:Label ID="lblImg2Text" runat="server" class="ImgText" /></a>
</div>
</div>
</div>
<div style="padding:40px;">
<asp:Label ID="lblText" runat="server" />
</div>
</asp:Content>
Пожалуйста, сообщите мне, если я забыл упомянуть какую-либо другую информацию.
Спасибо