Bootstrap 3 表单字段在移动设备上显示不大

Question

我的手机显示有问题。我希望表单输入显示非常大的输入栏。它在桌面上显示任何大小 window 我做的都很好。但是第二次我在移动设备上查看它，如果它是垂直的，则表单输入没有那么大，你必须缩放才能看到它。但是当我将 phone 水平转动时，它显示正常。

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-8 col-sm-8 col-lg-8 center-block">
            <form action="{{url_for('check')}}" method="POST">
            {{ form.url(placeholder=form.url.description, class="form-control input-lg") }}
            </form>
        </div>
    </div>
</div>

Answer 1

您可以使用 class col-xs-12.

使输入字段占据整个可用宽度

<!--- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<!--- personal styles should always be below Bootstrap Core CSS -->
<!--<link rel="stylesheet" href="css/theme.css">-->

<!--- Google  fonts-->


<div class="row">
  <div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-8 col-lg-8 center-block">
            <form action="{{url_for('check')}}" method="POST">
             <input type="text" name="username" value="" class="form-control input-lg" />
            </form>
        </div>
    </div>
</div>
</div>

  <!-- JQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!--- Bootstrap Core JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Answer 2

过了一会儿我弄明白了。 header.

中缺少此内容

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Bootstrap 3 表单字段在移动设备上显示不大

Bootstrap 3 Form field not showing large on mobile

jinja2

wtforms

flask-wtforms

twitter-bootstrap-3