我正在开发我的第一个Web应用程序。我需要一个简单的表单供用户提交一些值。我可以使用它,但是我希望数据输入字段位于行中而不是列中。
您可以在下面的代码段中看到引导程序。我认为这并不涉及,因为在不使用字段的情况下,字段会呈现在相同的位置。
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 %}
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:
{% 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">
...
结果如下:
我希望这三个字段在同一行(在同一行)。有什么建议么?
谢谢
只是添加我用于后代的解决方案:
我要做的就是将Lakindu的POC代码更改为:
<div class="col-md-4">
<div class="form-group">
{{wtf.form_field(form.ip, class="form-control", placeholder="Enter IP") }}
</div>
</div>
对于每个输入字段,并添加:
<div class="col-md-4">
<div class="input submit">
<input type="submit" value="Submit">
</div>
</div>
提交按钮。
感谢您的快速帮助。
最佳答案
这是您要实现的目标的概念证明。
您可以在col-md-4
和row
类中使用container
,以便将三个输入字段添加到一行。
<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>
关于html - HTML,CSS,flask_wtf如何更改表单字段的位置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49866923/