在“同一行"上显示Django表单字段. [英] Display Django form fields on the "same line"

问题描述

我想在同一行上显示两个表单字段，而不是一个接一个.

I would like to display two form fields on the same line and not each one after the other one.

目前，我得到:

Choice a theme :
   . Datasystems
   . Cameroun

但是我想显示如下形式:

But I would like to display this form like:

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问题，但到目前为止没有.

For the moment, I don't find a way to solve my problem. I looked some tutorials or StackOverflow questions but nothing up to now.

您对此处理有任何想法吗?

Do you have any idea about this handling?

推荐答案

您可以通过 Bootstrap 网格系统执行此操作.正如问题中所建议的那样，每行将有两个字段.

You can do this by Bootstrap grid system. As suggested in the question, By this there will be two fields on each row.

尝试一下:

  <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>

这篇关于在“同一行"上显示Django表单字段.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！