居中 Bootstrap / FlaskWTForms (Jinja)

Question

先声明一下，我对前端开发一窍不通。我一直在尝试将此表格置于永远感觉的中心，但没有任何效果。我正在使用 Flask Bootstrap 和 WTForms。这是我下面的代码：

HTML

{% block content %}
<body>
<div class="container center_div" align=middle>
    <h2>Indie/Alternative Artist Recommendation</h2>
    <p>Enter 5 artists below and we will provide similar artists you may like</p>
    <br/>
    <form method="Post" action="/results">
    <div class="col-xs-4" align=middle>
        {{ form.artist1.label(class="col-md-6 col-sm-12") }}

        {{ form.artist1(class="form-control") }}

        {{ form.artist2.label(class="col-lg-6 col-md-6 col-sm-12") }}

        {{ form.artist2(class="form-control") }}

        {{ form.artist3.label(class="col-lg-6 col-md-6 col-sm-12") }}

        {{ form.artist3(class="form-control") }}

        {{ form.artist4.label(class="col-lg-6 col-md-6 col-sm-12") }}

        {{ form.artist4(class="form-control") }}

        {{ form.artist5.label(class="col-lg-6 col-md-6 col-sm-12") }}

        {{ form.artist5(class="form-control") }}
    <p><input type=submit value=Go type="button" class="btn btn-default"></p>
    </div>

</form>
 </div>
{% block scripts %}
<script src="{{url_for('.static', filename='js/getArtists.js')}}"></script>
{{super()}}
{% endblock %}

还有 CSS 的部分（在我的 bootstrap.css 文件中）：

.center_div{
    margin: 0 auto;
    width:90%; 
    text-align: middle;
}

Answer 1

替换

...
<div class="col-xs-4" align=middle>
...

和

...
<div class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3 col-xs-12">
...

并且，请将您的 bootstrap.css 重置为原始状态，不要再触摸它。如果你想对 CSS 进行修改，你只需创建自己的 CSS 文件并将其加载到 bootstrap.css（或 bootstrap.min.css）之上（之后）。当您希望您的模组针对特定元素时使用特定选择器，而当您希望您的模组具有通用性时使用与 Bootstrap 相同的选择器。

CSS不是一天能学会的，所以...如果你的项目需要专业水平CSS，Bootstrap不会提供给你。在启动之前，您应该让前端开发人员查看您的应用程序。

居中 Bootstrap / FlaskWTForms (Jinja)

Centering Bootstrap / FlaskWTForms (Jinja)

html

css

jinja2

flask

twitter-bootstrap