2016-02-14 68 views
0

讓我先說我不知道​​前端開發什麼。我一直試圖以這種形式爲中心,感覺像永遠,但沒有任何工作。我正在使用Flask Bootstrap和WTForms。下面的代碼我有如下:Centering Bootstrap/FlaskWTForms(Jinja)

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; 
} 

回答

2

更換

... 
<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)之上(之後)。當你希望你的mods在特定的元素上時使用特定的選擇器,並且當你希望你的mods是普通的時候使用與Bootstrap相同的選擇器。

您無法在一天內學習CSS,所以......如果您的項目需要專業級CSS,Bootstrap將不會爲您提供。在啓動之前,您應該讓前端開發人員查看您的應用程序。