HTML，CSS，flask_wtf如何更改表单字段的位置
厂商
我正在开发我的第一个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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
构建类似于Jarvis的本地语言应用程序
- 2
在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？
- 3
Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用
- 4
SQL Server中的非确定性数据类型
- 5
使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中
- 6
Swift 2.1-对单个单元格使用UITableView
- 7
Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听
- 8
HttpClient中的角度变化检测
- 9
如何了解DFT结果
- 10
错误：找不到存根。请确保已调用spring-cloud-contract：convert
- 11
Embers js中的更改侦听器上的组合框
- 12
在Wagtail管理员中，如何禁用图像和文档的摘要项？
- 13
如何避免每次重新编译所有文件？
- 14
Java中的循环开关案例
- 15
ng升级性能注意事项
- 16
Swift中的指针替代品？
- 17
如何使用geoChoroplethChart和dc.js在Mapchart的路径上添加标签或自定义值？
- 18
使用分隔符将成对相邻的数组元素相互连接
- 19
在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID
- 20
ggplot：对齐多个分面图-所有大小不同的分面
- 21
完全禁用暂停（在内核级别？-必须与使用的DE和登录状态无关！）
我来说两句