gpt4 book ai didi

html - 无法将 div 内容定位到页面中心

转载 作者:行者123 更新时间:2023-11-28 16:18:20 25 4
gpt4 key购买 nike

我正在使用 angulars UI 路由器分别加载每个页面。我在 header.html 中有标题导航栏和侧边栏,在 login.html 中有主要内容(动态)

登录 html 页面与边栏和页脚重叠,因为它是单独加载的。我该如何解决?我应用了包装器(自定义 css)类,但它根本不影响布局。

这里是链接:http://angularspring-management999.rhcloud.com/default.html

示例代码:

<body>
<div id="wrap">

<!--header-->
<div ui-view="header"></div>

<!--sidebar-->
<div ui-view="sidebar"></div>

<!--main content-->
<div ui-view="content"></div>
</div>

<!--footer-->
<div ui-view="footer"></div>
</body>

状态:

myApp.config(function ($stateProvider, $locationProvider, $urlRouterProvider, $httpProvider) {

// For any unmatched url, redirect to /login
$urlRouterProvider.otherwise("/Login");

var header = {
templateUrl: 'views/Header.html',
controller: function ($scope) {
}
};

var sidebar = {
templateUrl: 'views/SideBar.html',
controller: function ($scope) {
}
};

var footer = {
templateUrl: 'views/Footer.html',
controller: function ($scope) {
}
};
// Now set up the states
$stateProvider
.state('Login', {
url: "/Login",
views: {
'header': header,
'sidebar': sidebar,
content: {
templateUrl: 'views/Login.html',
controller: function ($scope) {
}
},
'footer': footer
}
});

最佳答案

使用 bootstraps 网格不会像这样工作吗?

<div class="row">
<div class="col-xs-3">
<div ui-view="view-1"></div>
</div>
<div class="col-xs-9">
<div ui-view="view-2"></div>
</div>
</div>

我只在我的应用程序中使用过 1 个 ui-view 元素,然后为此类功能创建了自定义指令。但是根据文档,您的方式应该没问题。请注意,有时 ui-view 可以覆盖某些模板属性。

关于html - 无法将 div 内容定位到页面中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37307325/

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