페이지에서 페이지로 이동하는 부트스트랩 마스터 페이지
동일한 마스터 페이지를 사용하는 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/[email protected]/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>
내가 언급하는 것을 잊은 다른 정보가 있으면 알려주십시오.
고맙습니다
Reference
이 문제에 관하여(페이지에서 페이지로 이동하는 부트스트랩 마스터 페이지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jerry898989/bootstrap-master-page-shifting-from-page-to-page-460e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
