修復手機上的bootstrap字段列

我創建了一個簡單的網頁，以在PC網頁瀏覽器以及移動設備上顯示。修復手機上的bootstrap字段列

我正在使用python Flask來創建它。這是我的模板的代碼。

{% block content %} 
<div class="container"> 
    <div class="jumbotron" > 
     <div class="row"> 
      <h1 class="text-center">Header</h1> 
      <h2 class="text-center">Subtitle.</h2> 
      <p class="text-center">Comment.</p> 
      <br> 
     </div> 
     <form class="form form-inline" method="post" role="form"> 
      <div class="row"> 
       {{ form.hidden_tag() }} 
       {{ wtf.form_errors(form, hiddens="only") }} 
       {{ wtf.form_field(form.urlid,placeholder='Hint') }} 
       {{ wtf.form_field(form.submit) }} 
       <span class="help-block text-center">Help block.</span> 
      </div> 
      <p>Comment.</p> 
     </form> 
     <br><br><br><br><br><br><br> 
    </div> 
</div> 
{%- endblock %}

在pc瀏覽器中的結果是確定的。看到它：

enter image description here

但在我的移動形式不在線。看到它：

enter image description here 。

我該如何解決？我試過這個，但也沒有工作。

{{ wtf.form_field(form.urlid,placeholder='Hint',horizontal_columns=('sm', 2, 4)) }}

在此先感謝您。

來源

2016-01-09 Alex Pereira

移動低於sm自舉斷點，所以輸入佔據了整個寬度。

如果您希望輸入佔用您指定的寬度，請使用xs斷點。

{{ wtf.form_field(form.urlid,placeholder='Hint',horizontal_columns=('xs', 2, 4)) }}

來源

2016-01-09 21:53:31 jumbopap

引導是移動第一格柵系統。因此，xs設備需要12個網格。那就是原因，表單在移動視圖中不是內聯的。

如果你想獲得相同的視圖，桌面或移動相比大型設備，請更改從xs-12默認斷點設置xs-8爲文本框和爲按鈕。

謝謝。

來源

2016-10-26 08:17:40 KickyTrick

修復手機上的bootstrap字段列

回答

相關問題