html - Flask wtforms 单选按钮样式未显示为引导示例

Question

我无法弄清楚为什么我的烧瓶重量形式单选按钮没有以与引导示例相同的样式出现。我在我的 html 中使用 jinja 模板。我已经导入了所有样式表（站点的其他组件也使用引导程序并且它们工作正常）并将无线电表单包装在里面并将类“form-check-input”添加到无线电表单但它看起来仍然不同。这是我的 html 文件

                    <div class="col">
                        <div class="form-check">
                        <b>{{result_form.login_area.label}}</b>
                        {{result_form.login_area(class="form-check-input")}}
                        </div>
                    </div>

这是引导示例

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

这是表单在我的网页中的样子

这就是它的样子

标签： htmlbootstrap-4jinja2flask-wtforms

Answer 1

在为这个问题搜索了几个小时后，我在这里找到了答案： 侧面单选按钮奇怪的“额外”点

在我还没有单独的 css 的项目中，我在 base.html（您的模板 html 文件）的底部创建了一个放置 ul 样式的部分。像这样：

   <style>
     ul{
        list-style-type: none;
     }
  </style>

刷新页面，列表项的点消失了。