AngularMaterial with Bootstrap 3

Question

我在角度应用程序中的响应能力有一个奇怪的问题。在我的一个页面上，我使用了类col-xs-12的div中的md-card和md-list指令：

<div class="col-xs-12 col-sm-12 col-md-12">
    <md-card>
        <md-card-header>
            <md-card-avatar>
                <i class="material-icons md-36">&#xE858;</i>
            </md-card-avatar>
            <md-card-header-text>
                <div class="page-title-wrapper pull-left">
                    <h4 class="page-title">Quizzes</h4>
                    <div class="page-title-border"></div>
                </div>
            </md-card-header-text>
        </md-card-header>
    </md-card>
</div>

<div ng-repeat="quiz in vm.quizzes" class="col-xs-12 col-sm-6 col-md-4">
    <md-card>
        <md-card-header>
            <md-card-avatar>
                <i class="material-icons md-36" ng-bind-html="quiz.course.icon_font"></i>
            </md-card-avatar>
            <md-card-header-text>
                <span class="md-title">{{ quiz.course.name }}</span>
                <span class="md-subhead">{{ quiz.name }}</span>
            </md-card-header-text>
        </md-card-header>
        <img ng-src="{{ quiz.course.banner_url }}" class="md-card-image" alt="Fundamentals of Networking">
        <md-card-content>
            <p>
                {{ quiz.overview.substr(0, 100) }}{{ (quiz.overview.length > 100 ? '...' : '') }}
            </p>
            <div class="md-10 pull-left text-meta">
                {{ quiz.start_date }} {{ quiz.start_time }}
            </div>
            <div class="md-10 pull-right text-meta">
                {{ quiz.duration }}
            </div>
            <br>
            <hr>
            <div class="clearfix"></div>
            <md-button class="md-raised md-primary md-12 md-btn pull-right">
                <i class="material-icons md-14 pull-left margin-top-10">&#xE858;</i>
                <span class="md-text pull-left">
                    Start Quiz
                </span>
            </md-button>
        </md-card-content>
    </md-card>

</div>

现在由于某种原因，当屏幕调整大小时内容被移位时，容器不会随屏幕调整大小，因此大部分内容都被主体隐藏。只有在屏幕调整大小后重新加载页面后才能正常显示。

所以目前作为一个修复我已经在我的代码中将它放在每次屏幕调整大小时刷新或重新加载页面： / *在屏幕上重新加载APP调整大小* /

$(window).bind('resize', function(e)
{
    if (window.RT) clearTimeout(window.RT);
    window.RT = setTimeout(function()
    {
        this.location.reload(false); /* false to get page from cache */
    }, 100);
});

但是我不满意这样的屏幕重新加载，所以我想知道为什么会发生这种情况以及如何解决它。