Twitter bootstrap 3 引导和水平单选按钮
我正在尝试使用Twitter bootstrap 3 引导和水平单选按钮,twitter-bootstrap-3,flask,wtforms,flask-wtforms,Twitter Bootstrap 3,Flask,Wtforms,Flask Wtforms,我正在尝试使用引导CSS和表单来水平显示单选按钮。据我所知,我需要使用引导类class=“radio inline”来实现这一点。我试过了,我得到的是: 令人沮丧的是,单选按钮是垂直排列的 表格代码: from flask.ext.wtf import Form import csv import os import buildHome as bh from wtforms import TextField, RadioField, TextAreaField, SubmitField, va
引导CSS
和表单来水平显示单选按钮。据我所知,我需要使用引导类class=“radio inline”
来实现这一点。我试过了,我得到的是:
令人沮丧的是,单选按钮是垂直排列的
表格代码:
from flask.ext.wtf import Form
import csv
import os
import buildHome as bh
from wtforms import TextField, RadioField, TextAreaField, SubmitField, validators, BooleanField
class ContactForm(Form):
firstName = TextField("First name", [validators.Required("Please enter your first name.")])
lastName = TextField("Last name", [validators.Required("Please enter your last name.")])
#name = TextField("Name", [validators.Required("Please enter your name.")])
email = TextField("Email", [validators.Required("Please enter your email address."), validators.Email("Please enter your email address.")])
node_1 = BooleanField("Joan Johnson (Buckridge Inc)")
direction_1 = RadioField('', choices=[('Choice1','Choice1'),('Choice2','Choice2'),('Choice3','Choice3')])
freq_1 = RadioField('', choices=[(1,'Daily'),(7,'Weekly'),(30,'Monthly'),(183,'Yearly'),(365,'More')])
submit = SubmitField("Send")
用于创建Html代码的Flask的Html模板
{% extends "layout.html" %}
{% block content %}
<form action="{{ url_for('home') }}" method=post>
{{ form.hidden_tag() }}
<h3>Part I</h3>
<div class="well span6">
<div>
{{ form.firstName.label }} {{ form.firstName }}
</div>
<div>
{{ form.lastName.label }} {{ form.lastName }}
</div>
<div>
{{ form.email.label }} {{ form.email }}
</div>
</div>
<h3>Part II</h3>
<div <form class="form-horizontal" role="form">
<div class="well span6">
{{ form.node_1 (class_="checkbox style-2 pull-left") }} {{ form.node_1.label(class_="col-sm-3 control-label") }}
{{ form.direction_1.label }} {{ form.direction_1 (class_="radio-inline") }}
{{ form.freq_1.label }} {{ form.freq_1 (class_="radio-inline") }}
</div>
{{ form.submit }}{% endblock %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
<link rel="stylesheet" href="/static/css/bootstrap.css">
</head>
<body>
<header>
<div class="container">
<h1 class="logo">LOGO</h1>
<nav>
<ul class="menu">
<li><a href="/">Home</a></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<form action="/" method=post>
<div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="1454454094##65db3f398f17785503e4bf13dfe76ad4879eb792"></div>
<h3>
Part I</h3>
<div class="well span6">
<div>
<label for="firstName">First name</label> <input id="firstName" name="firstName" type="text" value="">
</div>
<div>
<label for="lastName">Last name</label> <input id="lastName" name="lastName" type="text" value="">
</div>
<div>
<label for="email">Email</label> <input id="email" name="email" type="text" value="">
</div>
</div>
<h3>Part II</h3>
<div <form class="form-horizontal" role="form">
<div class="well span6">
<input class="checkbox style-2 pull-left" id="node_1" name="node_1" type="checkbox" value="y"> <label class="col-sm-3 control-label" for="node_1">Joan Johnson (Buckridge Inc)</label>
<label for="direction_1"></label> <ul class="radio-inline" id="direction_1"><li><input id="direction_1-0" name="direction_1" type="radio" value="Choice1"> <label for="direction_1-0">Choice1</label></li><li><input id="direction_1-1" name="direction_1" type="radio" value="Choice2"> <label for="direction_1-1">Choice2</label></li><li><input id="direction_1-2" name="direction_1" type="radio" value="Choice3"> <label for="direction_1-2">Choice3</label></li></ul>
<label for="freq_1"></label> <ul class="radio-inline" id="freq_1"><li><input id="freq_1-0" name="freq_1" type="radio" value="1"> <label for="freq_1-0">Daily</label></li><li><input id="freq_1-1" name="freq_1" type="radio" value="7"> <label for="freq_1-1">Weekly</label></li><li><input id="freq_1-2" name="freq_1" type="radio" value="30"> <label for="freq_1-2">Monthly</label></li><li><input id="freq_1-3" name="freq_1" type="radio" value="183"> <label for="freq_1-3">Yearly</label></li><li><input id="freq_1-4" name="freq_1" type="radio" value="365"> <label for="freq_1-4">More</label></li></ul>
</div>
<input id="submit" name="submit" type="submit" value="Send">
</div>
</body>
</html>
</body>
</html>
{%extends“layout.html”%}
{%block content%}
{{form.hidden_tag()}}
第一部分
{{form.firstName.label}{{form.firstName}}
{{form.lastName.label}{{form.lastName}}
{{form.email.label}{{form.email}}
第二部分
我找到了解决办法
我所需要做的就是在构建html模板时遍历我的单选按钮字段,如下所示:
{% for subfield in form.freq_1 %}
<tr>
<td>{{ subfield }}</td>
<td>{{ subfield.label }}</td>
</tr>
{% endfor %}
{%用于form.freq_1%中的子字段
{{子字段}}
{{subfield.label}
{%endfor%}
您的第一个标签中有一个标签。你没有结束标记。哦,好吧,我会尝试修复这个…@jasonwarford,我用表单呈现的完整html编辑了我的问题。这会让问题更清楚。。。非常感谢你的帮助!表单应包含“表单组”类。这会阻止其他类工作。另外,你有一个表单嵌套到另一个表单,我从来没有见过这样的事情。尝试使用div而不是嵌套表单。最后,删除列表元素并尝试使用:1 2这在引导文档中。谢谢@PauloPedroso!就你的最后一点而言,我意识到我的一些问题可能来自我用表单生成html的事实,我编辑了我的问题,这更有意义吗?我想纠正你的前两点。非常感谢你的帮助,我很感激。