在
有人可以告诉我为什么我的网站没有使用浏览器左右的空间。我正在使用.NET Framework 4.6.1和Bootstrap 4。
以下是我删除所有控件后的页面，当我将所有控件保留在页面上并进行测试时，最初它将空格留在左右，但是在页面后返回后，该站点在完整的浏览器空间中呈现。不确定问题是什么。
我的主页和子页面如下。
主页
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="HomePage.master.cs" Inherits="HomePage" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<title>Site Title</title>
</head>
<body>
<style type="text/css">
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
.btn-group-justified .btn,
.btn-group-justified .btn-group {
float: none;
display: table-cell;
width: 1%;
}
.btn-group-justified .btn .btn,
.btn-group-justified .btn-group .btn {
width: 100%;
}
.btn-group-justified .btn .dropdown-menu,
.btn-group-justified .btn-group .dropdown-menu {
left: auto;
}
</style>
<script src="../Scripts/jquery-3.2.1.slim.min.js"></script>
<script src="../Scripts/popper.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script src="../Scripts/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<form id="MainForm" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="MainUpdPanel" runat="server">
<ContentTemplate>
<div id="ParentDiv" class="container">
<div class="row">
<div class="col-md-12">
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row">
<div class="col-md-12">
<asp:ContentPlaceHolder ID="PageContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
儿童页面
<%@ Page Language="C#" CodeFile="HRMCareerEAF.aspx.cs" Inherits="HRMCareerEAF" MasterPageFile="~/HomePage.master"
Title="Employment Application Form" MaintainScrollPositionOnPostback="true" EnableEventValidation="false" Theme="Default" %>
<asp:Content ID="MyHeadContent" ContentPlaceHolderID="HeadContent" runat="server">
<div class="row">
<div class="col-md-12">
<table class="table table-sm">
<tr>
<td>
<div class="btn-group btn-group-justified">
<div class="btn-group">
<asp:Button ID="btnPersonal" runat="server" Text="Personal" />
</div>
<div class="btn-group">
<asp:Button ID="btnEducation" runat="server" Text="Education" />
</div>
<div class="btn-group">
<asp:Button ID="btnExperience" runat="server" Text="Experience" />
</div>
<div class="btn-group">
<asp:Button ID="btnExpDetails" runat="server" Text="Exp. Details" />
</div>
<div class="btn-group">
<asp:Button ID="btnSkills" runat="server" Text="Skills/Salary" />
</div>
<div class="btn-group">
<asp:Button ID="btnAddress" runat="server" Text="Address" />
</div>
<div class="btn-group">
<asp:Button ID="btnFamily" runat="server" Text="Family/Health" />
</div>
<div class="btn-group">
<asp:Button ID="btnGeneral" runat="server" Text="General" />
</div>
<div class="btn-group">
<asp:Button ID="btnOthers" runat="server" Text="Others" />
</div>
<div class="btn-group">
<asp:Button ID="btnDeclarations" runat="server" Text="Declaration" />
</div>
</div>
</td>
<td>
<asp:LinkButton ID="lnkEAF" runat="server" >EAF</asp:LinkButton>
</td>
<td>
<asp:LinkButton ID="lnkLogout" runat="server" >Logout</asp:LinkButton>
</td>
</tr>
</table>
</div>
</div>
</asp:Content>
<asp:Content ID="EAFContent" ContentPlaceHolderID="PageContent" runat="Server">
<asp:MultiView ID="MV1" runat="server" ActiveViewIndex="0">
<asp:View ID="PersonalView" runat="server">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="form-inline col-md-6">
Test
</div>
<div class="col-md-6">
Test
</div>
</div>
<div class="row">
<div class="col-md-6">
Test
</div>
<div class="col-md-6">
Test
</div>
</div>
</div>
</div>
</asp:View>
</asp:MultiView>
</asp:Content>
浏览器中我页面的屏幕截图如下。
浏览器中的页面屏幕截图
我只是更换
<div id="ParentDiv" class="container">
<div id="ParentDiv" class="container-fluid">
它像魔术一样工作。谢谢您的答复。
<style type="text/css">
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
.btn-group-justified .btn,
.btn-group-justified .btn-group {
float: none;
display: table-cell;
width: 1%;
}
.btn-group-justified .btn .btn,
.btn-group-justified .btn-group .btn {
width: 100%;
}
.btn-group-justified .btn .dropdown-menu,
.btn-group-justified .btn-group .dropdown-menu {
left:100px ;
}
</style>
2.JS文件是更改您的对齐
3.在每个js文件中，它具有.dropdown和其他控件，您必须通知并更改该文件...尝试更改菜单并在每个JS文件上检查(.menu(选项 <</strong>
4.如果您不知道将所有JS文件发送给我或发布。