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

时间:2014-12-15 00:19:10

标签: css twitter-bootstrap

我在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;
    }
}

1 个答案:

答案 0 :(得分:0)

你的宽度: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;
    }
}

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