Bootstrap在固定位置的移动设备上没有响应？

Question

我遇到了一些问题，而div没有按照我认为的方式做出回应。 我有这个代码;

<div class="wrapper">
<div class="container">
    <div class="col-md-12">
        <div class="header-form" style="border: 2px solid purple; margin: 1%;">
            <div class="row">
                <form ng-controller="GetQuery" ng-submit="submitForm()">
                    <div class="col-md-6">
                        <div class="form-group label-floating">
                            <label class="control-label">Starbucks, McDonalds, etc..</label>
                            <input ng-model="form.keyword" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group label-floating">
                            <label class="control-label">City, State or Zip..</label>
                            <input ng-model="form.location" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" ng-click="Submit" href="#!view1" class="btn btn-primary btn-lg"><i class="fa fa-search"></i> Lets Go!</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

这可以正常工作。但是我所知道的只是修复这个包含表单到位的div：fixed，所以当你滚动div继续留在视图中。但是，当我有一个内联样式

style="position: fixed;"

我用移动视图检查它，div默认只使用一半的页面。在桌面视图中，它可以正常工作。

我错过了什么？