Django Djnago:Bootstrap3表单下拉选项显示问题_Django_Twitter Bootstrap 3_Django Forms_Django Bootstrap3

Django Djnago:Bootstrap3表单下拉选项显示问题

django twitter-bootstrap-3

Django Djnago:Bootstrap3表单下拉选项显示问题,django,twitter-bootstrap-3,django-forms,django-bootstrap3,Django,Twitter Bootstrap 3,Django Forms,Django Bootstrap3,我使用django模板中的bootstrap3来显示下拉菜单，以便用户可以选择他们选择的选项。选择该选项后，所选选项不会清晰显示。见下图在选择选项时选择该选项后，其显示如下所示很难看到用户选择了什么选项。如何解决此问题，以便用户可以清楚地看到他们选择了什么选项下面是我用于此目的的html代码 {% extends 'base.html' %} {% load bootstrap3 %} {% block content %} <body> <section clas

我使用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 %}

编辑：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;
}

你有一个.css文件吗？这就是需要进行更改以适应您使用的字体的地方。@m.arthur我在帖子中添加了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;
}