在“同一行”上显示 Django 表单字段答案

【问题标题】：Display Django form fields on the "same line"在“同一行”上显示 Django 表单字段
【发布时间】：2017-07-20 16:44:25
【问题描述】：

我想在同一行显示两个表单域，而不是一个接一个。

目前，我得到：

Choice a theme :
   . Datasystems
   . Cameroun

但我想这样显示这个表单：

Choice a theme:
       . Datasystems                    . Cameroun

我的 .html 文件看起来像：

{% extends 'Base_Configurations.html' %} 
{% load staticfiles %} 
{% load static %} 
{% block title %}
    <h3> <span class="glyphicon glyphicon-file"></span> Choix du thème DatasystemsEC </align> </h3>
{% endblock %}

{% block content %}

    <form class="form" method='POST' action=''> {% csrf_token %}
        <br></br>
        {{ form }}
        <br></br>
        <input class="button" type="submit" value="Valider le thème" />
    </form>

{% endblock %}

我还有一个 .css 文件：

.form-fields {
    border-radius: 4px;
    margin-right: auto;
    width:50%;
    background-color: #f5f5f5;

    }

.form {
    padding-left:8vw;

}

label {
        width: 35%;
        border-radius: 8px; 
        margin-bottom: -20px;
        list-style: none;
}

目前，我找不到解决问题的方法。我查看了一些教程或 StackOverflow 问题，但目前还没有。

你对这个处理有什么想法吗？

【问题讨论】：

如果你想使用 bootstrap，那么我有一个简单的解决方案给你。
@PrakharTrivedi 谢谢你的回答。我在 10 秒前刚刚找到了解决方案。我要编辑一个答案。但我想听听你的解决方案；）

标签： python html css django django-templates

【解决方案1】：

您可以通过 Bootstrap 网格系统来做到这一点。正如问题中所建议的那样，每行将有两个字段。

试试这个：

  <div class="container">
    <div class="row">
    {% for field in form  %}
      <div class="col-sm-6">
        <b>{{ field.label_tag }}</b> - {{ field }} 
      </div>
    {% endfor %}
    </div>  
  </div>

【讨论】：

感谢您的回答。这有点复杂，因为我已经在使用引导网格。在我的 base_template.html 中，这部分已经编写了这样的脚本：<div class="col-md-10"> {% block content %} {% endblock content %} </div> 而block content 是我提出的问题；）
@Valentin 试试我的答案。外部 col-md-10 将相应地包含内部 col-md-6。你不需要做任何事情。如果您已经在使用 bootstrap，那么建议使用网格系统而不是自己编写 CSS。谢谢。
好的，我明白了。我将在我的问题中添加一个带有脚本结果的编辑部分；）它不会显示 RadioSelectbox 内联。
@Valentin 现在我了解您的全部要求。对于单选框，您可能需要一些额外的 CSS。
如果我没有提供所有元素，我深表歉意。我将根据您的回答使用额外的 CSS ;)

【解决方案2】：

不要使用 {{ form }}，而是手动打开表单域。

  {% for field in form  %}
    {{ field.errors }}
    <li> {{ field.label_tag }} {{ field }} </li> 
  {% endfor %}

CSS -

li {
    list-style-type: none; 
    display : inline;
    }

我认为它会起作用。如果有，请告诉我。

【讨论】：

我编辑了你的答案，我找到了一个很好的解决方案；）谢谢

【解决方案3】：

你可以看这里https://docs.djangoproject.com/en/1.10/topics/forms/#working-with-form-templates

如果你使用 bootstrap，你可以在 forms.py 中添加你需要的类

喜欢：

class MyForm(forms.Form):
    myfield = forms.CharField(widget=forms.TextInput(attrs={'class' : 'myfieldclass'}))

或：

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel
        widgets = {
            'myfield': forms.TextInput(attrs={'class': 'myfieldclass'}),
        }

【讨论】：

【解决方案4】：

内联 Crispy 表单：每行 2 列。

<form method="post" id="id_form" class="mx-auto text-left">
    {% csrf_token %}
    <div class="row">
        {% for field in form %}
            <div class="col-sm-6 ">
                {{ field|as_crispy_field }}
            </div>
        {% endfor %}
    </div>

    <button type="submit" class=" d-block btn btn-lg btn-success mt-4 w-50 mx-auto">
        Save
    </button>
</form>

【讨论】：