gpt4 book ai didi

css - div 内容遍历 SB Admin v2.0 中的整个页面

转载 作者:行者123 更新时间:2023-11-28 08:48:34 25 4
gpt4 key购买 nike

我在 SB Admin v2.0 的设计中遇到了问题.我把原来的 css 修改为 RTL,但现在中间的 div 内容贯穿了整个页面。我希望它位于页面中间。

这是我的 HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" dir="rtl">
<title>Sp</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<link href="../css/bootstrap.min.css" rel="stylesheet">

<!-- MetisMenu CSS -->
<link href="../css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">

<!-- Timeline CSS -->
<link href="../css/plugins/timeline.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="../css/sb-admin-2.css" rel="stylesheet">

<!-- Morris Charts CSS -->
<link href="../css/plugins/morris.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="../font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body dir="rtl">
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="wrapper">

<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="BHome.aspx"></a>
</div>
<!-- /.navbar-header -->

<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i><i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li>
<a href="../Users/Users.aspx"><i class="fa fa-gear fa-fw"></i>User Settings</a>
</li>
<li class="divider"></li>
<li>
<a href="../Login.aspx"><i class="fa fa-sign-out fa-fw"></i>Sign-out</a>
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->

<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="...بحث">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<a class="active" href="BHome.aspx">
Home<i class="fa fa-dashboard fa-fw"></i>

</a>
</li>
<li>
<a href="#"><i class="fa fa-edit fa-fw"></i>Main<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="~/Customers/Customers.aspx"
title="Cusomers">Cusomers</a>
</li>

</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>

<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
<asp:Label ID="ContentTitleLabel" runat="server"></asp:Label>
</h1>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<tbody>
<tr>
<td align="right">
<table style="width: 100%">
<tbody>
<tr>
<td class="ui-widget-header">رقم العميل</td>
<td>
<input name="ctl00$MainContent$txtSearchCustomerID" type="text" id="ctl00_MainContent_txtSearchCustomerID" />
</td>
<td class="ui-widget-header">اسم العميل</td>
<td>
<input name="ctl00$MainContent$txtSearchCustomerName" type="text" id="ctl00_MainContent_txtSearchCustomerName" />
</td>
<td>
<input type="submit" name="ctl00$MainContent$cmdSearch" value="بحث" id="ctl00_MainContent_cmdSearch" class="submit" />
</td>
</tr>
<tr>
<td class="ui-widget-header">العنوان</td>
<td>
<input name="ctl00$MainContent$txtSearchAddress" type="text" id="ctl00_MainContent_txtSearchAddress" />
</td>
<td class="ui-widget-header">التليفون</td>
<td>
<input name="ctl00$MainContent$txtSearchTelephone1" type="text" id="ctl00_MainContent_txtSearchTelephone1" />
</td>
<td>
<input type="submit" name="ctl00$MainContent$cmdAddNew" value="عميل جديد" id="ctl00_MainContent_cmdAddNew" class="submit" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<span id="ctl00_MainContent_lblRecordsFound">سجلات 1</span>
<div>
<table class="PCG-Content" cellspacing="0" rules="all" border="1" id="ctl00_MainContent_grd" style="width:100%;border-collapse:collapse;">
<tbody>
<tr class="ui-widget-header">
<th class="BoundFieldHeaderStyleHidden" scope="col">&nbsp;</th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$grd','Sort$Customers.CustomerID')"><div><div style="float:left;">رقم العميل</div><div class="ui-icon ui-icon-carat-2-n-s" style="float:right;"></div></div></a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$grd','Sort$Customers.CustomerName')"><div><div style="float:left;">اسم العميل</div><div class="ui-icon ui-icon-carat-2-n-s" style="float:right;"></div></div></a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$grd','Sort$Customers.Address')"><div><div style="float:left;">العنوان</div><div class="ui-icon ui-icon-carat-2-n-s" style="float:right;"></div></div></a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$grd','Sort$Customers.Telephone1')"><div><div style="float:left;">رقم التليفون 1</div><div class="ui-icon ui-icon-carat-2-n-s" style="float:right;"></div></div></a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$grd','Sort$Customers.Telephone2')"><div><div style="float:left;">رقم التليفون 2</div><div class="ui-icon ui-icon-carat-2-n-s" style="float:right;"></div></div></a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$grd','Sort$Customers.Telephone3')"><div><div style="float:left;">رقم التليفون 3</div><div class="ui-icon ui-icon-carat-2-n-s" style="float:right;"></div></div></a></th>
<th scope="col">&nbsp;</th>
</tr>
<tr class="ui-widget-content">
<td class="BoundFieldItemStyleHidden">1</td>
<td>1</td>
<td>Name</td>
<td>Address</td>
<td>Address 2</td>
<td>7</td>
<td>8</td>
<td><input type="button" value="Edit" onclick="javascript:__doPostBack('ctl00$MainContent$grd','$0')" class="GridEditButton" /></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<input type="submit" name="ctl00$MainContent$cmdFirst" value="<<" id="ctl00_MainContent_cmdFirst" disabled="disabled" class="submit" />
<input type="submit" name="ctl00$MainContent$cmdPrevious" value="<" id="ctl00_MainContent_cmdPrevious" disabled="disabled" class="submit" />
<span id="ctl00_MainContent_lblPageNumber"> صفحة 1 من1</span>&nbsp;&nbsp;
<input type="submit" name="ctl00$MainContent$cmdNext" value=">" id="ctl00_MainContent_cmdNext" disabled="disabled" class="submit" />
<input type="submit" name="ctl00$MainContent$cmdLast" value=">>" id="ctl00_MainContent_cmdLast" disabled="disabled" class="submit" />
</td>
</tr>
</tbody>
</asp:ContentPlaceHolder>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->
<!-- jQuery Version 1.11.0 -->
<script src="../js/jquery-1.11.0.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="../js/bootstrap.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="../js/plugins/metisMenu/metisMenu.min.js"></script>

<!-- Morris Charts JavaScript -->
<script src="../js/plugins/morris/raphael.min.js"></script>
<script src="../js/plugins/morris/morris.min.js"></script>

<%--
<script src="../js/plugins/morris/morris-data.js"></script>--%>

<!-- Custom Theme JavaScript -->
<script src="../js/sb-admin-2.js"></script>

</form>
</body>
</html>

这是我修改后的 CSS:

#wrapper {
width: 100%;
float: right;
}

#page-wrapper {
padding: 0 15px;
min-height: 568px;
background-color: #fff;
float: right;
}

@media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
text-align: center;
width: 100%;
padding: 0 0 0 0px;
border-left: 1px solid #e7e7e7;
float: right;
}
}

最佳答案

您的 width: 100% 样式阻止它居中。尝试这样的事情:

#wrapper {
}

#page-wrapper {
min-height: 568px;
background-color: #fff;
}

@media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 auto;
text-align: center;
max-width: 700px;
padding: 0 0 0 0px;
border-left: 1px solid #e7e7e7;
}
}

它本质上归结为给元素一个宽度或最大宽度,并将左右边距设置为自动。

关于css - div 内容遍历 SB Admin v2.0 中的整个页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27475699/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com