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

Question

我的移动显示器有问题。我希望表单输入显示输入栏非常大。它可以在桌面上很好地显示我制作的任何大小的窗口。但是第二次我在移动设备上查看它，如果它是垂直的，表单输入就没有那么大了，你必须放大才能看到它。但是当我将手机水平转动时，它显示它很好。

<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

过了一会儿，我就明白了。标题中缺少此内容。

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

Answer 2

您可以使用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>