Изменение местоположения панелей при мобильном

На рабочем столе у нас есть левая панель и боковая панель. Левая панель имеет большое количество контента, настолько, что при визуализации на мобильном устройстве боковая панель пропускается пользователями.Изменение местоположения панелей при мобильном

При визуализации на мобильном устройстве сначала отображается левая панель, а затем боковая панель отображается после левой панели. Есть ли способ изменить это поведение, так что боковая панель отображается над левой панелью в мобильном браузере?

источник

2016-08-26 Keith Franklin

Вы используете бутстрап, фундамент или некоторые другие рамки для вашего отзывчивого дизайна? –

DNN8 теперь использует Bootstrap –

Чтобы разместить одну панель над другой на определенных размерах экрана, мы используем z-index.

Чтобы сделать это, просто измените панели Z-индекс с помощью CSS:

@media (max-width: 767px) { 
    .leftpane{ 
     z-index: 2; 
    } 
    .sidepane{ 
     z-index: 3; 
    } 
}

Позвольте мне знать, если это работает для вас. Благодаря!

источник

2016-08-26 19:07:41

Наконец-то это удалось запустить, мне пришлось изменить назначение CSS на $ ('. LeftPane'). Attr ('style', 'display: block! Important'); Однако, когда он запускался, просто поместите левую панель в то же самое место. –

Хм. Возможно, я неправильно понял ваш вопрос. Вы хотите, чтобы одна панель над другой? В этом случае вы можете использовать свойство «z-index» в css. Затем вы можете загрузить z-index как разные значения в зависимости от размера экрана. –

Я изменил ответ на то, что, как я думаю, вы ищете. Это помещает боковую панель над левой панелью на мобильные устройства. Ваша левая панель должна иметь класс «левая», а ваша боковая панель должна иметь боковую панель класса. –

Первый элемент, найденный на скине, будет первым. Невозможно изменить это (насколько я знаю). Но это может быть так же просто, как переключение двух элементов div на страницу скина DNN.

<div id="SidePane" class="SidePane" runat="server"> 
<div id="LeftPane" class="LeftPane" runat="server">

вместо

<div id="LeftPane" class="LeftPane" runat="server"> 
<div id="SidePane" class="SidePane" runat="server">

Но в зависимости от CSS и HTML дизайн кожи это может быть легко исправить или полностью уничтожить дизайн сайта. Если вы купили кожу у DNN store (или другого поставщика), стоит попробовать спросить продавца.

источник

2016-08-26 22:47:21 VDWWD

Мы закончили достижение нашей цели, имея отдельную страницу для мобильных устройств с другой компоновкой. DNN затем имеет возможность перенаправлять на другую страницу, если обнаружено мобильное устройство.

источник

2016-08-31 19:05:35

Изменение местоположения панелей при мобильном

ответ

Смежные вопросы