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

Question

I have website with AngularJS with this menu

but this is what happen when it loaded in mobile

Can I achieve layout like this in mobile?

this is html Code

    <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>

Thanks before

Answer 1

You can use media queries and also mention bootstrap xs columns . If you are making it responsive on xtra small screen , you need to use bootstrap column for alignment then you can use css media queries to style them. In fact for a responsive website , you need to define its behavior and align it on all 4 screens (lg,md,sm,xs).

I'm assuming you know bootstrap grid system already. I hope it solved your question and if you need to ask something let me know.