时间戳

首页 > 解决方案 > Djnago：Bootstrap3 表单下拉选项显示问题

django - Djnago：Bootstrap3 表单下拉选项显示问题

问题描述

我在 django 模板中使用 bootstrap3 来显示下拉菜单，以便用户可以选择他们选择的选项。选择选项后，选择的选项显示不清晰。见下图。

选择选项时 在此处输入图像描述

选择选项后，其显示如下

在此处输入图像描述

很难看出用户选择了什么选项。如何解决此问题，以便用户可以清楚地看到他们选择的选项？

下面是我为此使用的 html 代码

{% extends 'base.html' %}
{% load bootstrap3 %}
{% block content %}
<body>
<section class="hero p9">
<div class="explore-section">
  <div class="container">
     <form  method="post" >
       {% csrf_token %}
       {% bootstrap_form form %}
       <button class='btn btn-default' type='submit'>Select</button>
     </form>
 </div>
</div>
</section>
</body>
{% endblock content %}

仅供参考，以下是我为此使用的表格。

class selectPostTypeForm(forms.Form):

    STATUS_CHOICES = (('1', 'Text Post'),('2', 'Image Post'),('3', 'Video Post'),)
    post_type = forms.ChoiceField(choices=STATUS_CHOICES)

编辑：CSS信息

.hero {
  padding: 10rem 0px 0px 0px;
  background-size: cover;
  background-position: bottom left;
}
.hero.p9{
  padding: 9rem 0px 0px 0px;
}

.explore-section {
  text-align: center;
  padding: 40px 0px;
}
.explore-section h2 {
  color: #3b5997;
  font-size: 40px;
}
.explore-section p {
  font-size: 16px;
  color: #656565;
  margin: 0px 0px 20px;
}

标签： djangotwitter-bootstrap-3django-formsdjango-bootstrap3

解决方案

推荐阅读