django-admin如何将左边的框移动到上面横排
时间: 2023-09-21 14:13:21 浏览: 49
默认情况下,Django 管理界面左侧的导航栏是垂直排列的。如果你想将它移到页面的上方并水平排列,可以使用 Django 的自定义模板功能。
首先,在你的应用程序中创建一个新的 `templates/admin/base.html` 模板,以覆盖 Django 默认的管理模板。在这个新模板中,你可以使用自定义的 HTML 和 CSS 代码来重新排列管理界面的各个元素。例如,以下是一个简单的示例:
```html
{% extends "admin/base.html" %}
{% block content %}
<div id="header"></div>
<div id="nav-bar">{% block nav-global %}{% endblock %}</div>
{% block messages %}{% endblock %}
{% block breadcrumbs %}{% endblock %}
{% block coltype %}{% endblock %}
{% block pretitle %}{% endblock %}
{% block content_title %}{% endblock %}
{% block object-tools %}{% endblock %}
{% block related_objects %}{% endblock %}
{% block after_related_objects %}{% endblock %}
{% block submit_buttons_bottom %}{% endblock %}
{% block submit_row %}{% endblock %}
{% block form_top %}{% endblock %}
{% block form_before_fields %}{% endblock %}
{% block form_after_fields %}{% endblock %}
{% block formset_top %}{% endblock %}
{% block formset_options %}{% endblock %}
{% block formset_results %}{% endblock %}
{% block pagination %}{% endblock %}
{% endblock %}
```
在这个示例中,我们将导航栏(即左侧的框)移到了页面的顶部,并包装在一个名为 `nav-bar` 的 div 中。注意,我们使用了 `block` 标签来覆盖了默认的模板块,这样 Django 将会使用我们自定义的 HTML 代码来渲染这些块。
接下来,你可以在新模板中添加 CSS 代码,来调整导航栏和其他元素的样式。例如,以下是一个简单的 CSS 样式表:
```css
#nav-bar {
display: flex;
align-items: center;
background-color: #f0f0f0;
padding: 10px;
}
#header {
height: 100px;
background-color: #007bff;
margin-bottom: 20px;
}
```
在这个样式表中,我们使用了 `display: flex` 属性来将 `nav-bar` 中的元素水平排列,并使用了 `align-items: center` 属性来垂直居中这些元素。我们还使用了 `background-color` 和 `padding` 属性来设置导航栏和顶部标题的样式,以及使用了 `height` 和 `background-color` 属性来设置顶部标题的样式。
最后,你需要在你的 Django 设置中设置 `TEMPLATES` 变量,以使用你的自定义模板。例如,以下是一个简单的 `TEMPLATES` 设置:
```python
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['myapp/templates'], # 指定模板目录
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.contrib.auth.context_processors.auth',
'django.template.context_processors.debug',
'django.template.context_processors.i18n',
'django.template.context_processors.media',
'django.template.context_processors.static',
'django.template.context_processors.request',
'django.contrib.messages.context_processors.messages',
],
},
},
]
```
在这个设置中,我们将模板目录设置为 `myapp/templates`,这是我们新模板的目录。这样,Django 将会使用我们自定义的模板来渲染管理界面。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![gz](https://img-home.csdnimg.cn/images/20210720083447.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)