HTML,CSS,flask_wtf如何更改表单字段位置

时间:2018-04-16 22:04:30

标签: html css twitter-bootstrap

我正在处理我的第一个webapp。我需要一个简单的表单供用户提交一些值。我得到了它的工作,但我希望数据输入字段在一行而不是一列。

您可以在下面的代码段中看到引导程序。我不认为这涉及到因为字段在相同的位置呈现而不使用它。

base.html文件:



{% extends 'bootstrap/base.html' %}

{% block title %}
...
{% endblock %}

{% block navbar %}
...
{% endblock %}

{% block content %}
    <div class="container">
...
        {# application content needs to be provided in the app_content block #}
        {% block app_content %}{% endblock %}
    </div>
{% endblock %}
&#13;
&#13;
&#13;

forms.py:

from flask_wtf import FlaskForm
from wtforms import StringField, IntegerField, PasswordField, BooleanField, SubmitField
from wtforms.validators import DataRequired, IPAddress, NumberRange, length

class SnmpQueryForm(FlaskForm):
    ip = StringField('IP Address', validators=[IPAddress()])
    mask = IntegerField('Mask bits',
                         validators=[DataRequired(),
                         NumberRange(22, 32)]
                       )
    snmpcmstr = StringField('Community String',
                            validators=[DataRequired(),
                            length(max=20)]
                           )
    submit = SubmitField('Submit Query')

template.html:

&#13;
&#13;
{% extends "base.html" %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block app_content %}
    <h1>Enter SNMP Query Information</h1>
    <form action="", method="post">
    <div class="row">
        <div class="col-md-2">
            {{ wtf.quick_form(form) }}
        </div>
    </div>
    </form>
    <br>
    <br>
    <div class="container">
        ...
&#13;
&#13;
&#13;

结果如下:

enter image description here

我希望这三个字段在同一行(在同一行)。有什么建议吗?

谢谢

只是添加我用于后代的解决方案:

我所要做的就是将Lakindu的POC代码更改为:

&#13;
&#13;
<div class="col-md-4">
  <div class="form-group">
    {{wtf.form_field(form.ip, class="form-control", placeholder="Enter IP") }}
  </div>
</div>
&#13;
&#13;
&#13;

为每个输入字段添加:

&#13;
&#13;
<div class="col-md-4">
  <div class="input submit">
      <input type="submit" value="Submit">
  </div>  
</div>
&#13;
&#13;
&#13;

用于提交按钮。

感谢您的快速帮助。

1 个答案:

答案 0 :(得分:1)

这是您尝试实现的概念的证明。 您可以在col-md-4row类中使用container,以便将三个输入字段添加到一行。

&#13;
&#13;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<form action="" , method="post">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <label>IP address</label>
          <input type="text" class="form-control">
        </div>
      </div>

      <div class="col-md-4">
        <div class="form-group">
          <label>Mask bits</label>
          <input type="text" class="form-control">
        </div>
      </div>

      <div class="col-md-4">
        <div class="form-group">
          <label>Community string</label>
          <input type="text" class="form-control">
        </div>
      </div>

    </div>
  </div>
</form>
&#13;
&#13;
&#13;