修复手机上的bootstrap字段列

Question

我正在创建一个简单的网页，以便在网络浏览器和手机上展示。

我正在使用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浏览器的结果没问题。看到它：

但我的手机中的表格不是内联的。看到它：

我该如何解决？我试过这个，但也没办法。

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

提前谢谢。

Answer 1

Mobile低于引导带的sm断点，因此输入占据了整个宽度。

如果您希望输入占用您指定的宽度，请使用xs断点。

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

Answer 2

Bootstrap是一个移动的第一个网格系统。因此xs设备需要12个网格。这就是原因，表格在移动视图中不是内联的。

如果您希望获得与移动设备相同的桌面设备或大型设备，请将文本框的默认断点设置从xs-12更改为xs-8， 按钮的xs-4。

感谢。