Python 修复手机上的引导字段列

我正在创建一个简单的网页，在pc网络浏览器和手机上显示

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

---

提前谢谢。

Mobile位于引导的

sm

断点下方，因此输入占用了整个宽度

如果希望输入占用指定的宽度，请使用

xs

断点

{{wtf.form_字段（form.urlid，占位符='Hint'，水平_列=（'xs'，2，4））}

Bootstrap是一个移动第一网格系统。因此

xs

设备需要12个网格。这就是为什么表单没有在移动视图中内联

如果您希望在桌面或大型设备中获得与移动设备相同的视图，请将文本框的默认断点设置从

xs-12

更改为

xs-8

，并将按钮的默认断点设置从

xs-4

谢谢

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