AngularJS 菜单布局桌面和移动响应答案

【问题标题】：AngularJS menu layout desktop and mobile responsiveAngularJS 菜单布局桌面和移动响应
【发布时间】：2018-09-04 13:27:56
【问题描述】：

我有一个带有这个菜单的 AngularJS 网站

但这是在移动设备中加载时发生的情况

我可以在移动设备中实现这样的布局吗？

这是html代码

    <div flex="nogrow">
        <div layout="row" layout-align="end center">
            <div class="dashboard-button-right pointer" ng-repeat="btn in dashboardButtons" ng-click="dashboardClick(btn, $event)" 
                 ng-class="{'{{btn.active_class}}': btn.active === true, '{{btn.class}}': btn.active === false}">
              {{btn.label}}
            </div>
        </div>

    </div>

感谢之前

【问题讨论】：

是的，你可以实现，但你需要编写响应式媒体查询

标签： html css angularjs mobile responsive-design

【解决方案1】：

您可以使用媒体查询，也可以提及bootstrap xs columns。如果您要使其在 xtra small screen 上响应，则需要使用引导列进行 alignment 然后您可以使用 css 媒体查询 来设置它们的样式.事实上，对于一个响应式网站，您需要定义它的行为并在所有 4 个屏幕（lg、md、sm、xs）上对齐 .

我假设你已经知道引导网格系统。我希望它解决了你的问题，如果你需要问什么，请告诉我。

【讨论】：