Навигация по панели навигации аналогична визуальным студиям в asp - PullRequest
Новая
       12

Навигация по панели навигации аналогична визуальным студиям в asp

0 голосов
/ 18 сентября 2018

В верхней части моей страницы есть панель навигации с элементом «user», отображающим текущий логин.

Моя цель - работать так же, как в Visual Studio, когда вы изменяете размер (левые элементы навигации для переноса, а правая информация для входа остается фиксированной в верхнем правом углу).

То, что у меня сейчас есть, делает 99% из этого. Недостающий 1% - это обтекание левых элементов при попадании в правую часть окна (они игнорируют пользовательский элемент). 

<div id="header_nav_buttons"> 
  <ul>
      <li><asp:HyperLink Text="Link1"/></li>
      <li><asp:HyperLink Text="Link2"/></li>
      <li class="header_session"></li>
  </ul>
</div>

#header_nav_buttons
{
    float: left;
    width: 100%;

    height: auto;
    line-height: 30px;
}

#header_nav_buttons ul
{
    display: inline;
    list-style: none;
    margin: 0px;
    width: 80%;
}

#header_nav_buttons li
{
    display: inline-flex;
    padding-right: 13px;

}

.header_session
{
    float:right;
    padding-right:40px;
    position: absolute;
    right: 0;
    top: 8px;
}

1 Ответ

0 голосов
/ 18 сентября 2018

Это типичное поведение RWD ( Responsive Web Design ), которое вы ищете.Вам нужно начать новый проект в VS и Bootstrap должен быть включен как часть этого.Вы должны придерживаться версии 3 Bootstrap, так как я не уверен, что VS уже догнал версию 4.Вам действительно нужно пометить свой вопрос лучше, чтобы показать, какую версию ASP.NET вы используете и какую версию VS.

Сейчас вы используете фиксированные единицы измерения в своем CSS - RWD это все процентыкак все растягивается.Вы можете использовать менеджер пакетов Nuget, чтобы добавить Bootstrap в ваш проект, но ваш вопрос слишком расплывчат, чтобы я мог указать вам конкретное направление.Попробуйте начать с хорошего учебника или два .

ОБНОВЛЕНИЕ:

При создании новых стилей в проекте оставьтеоригинальный файл Bootstrap.css как есть.Создайте новую таблицу стилей style.css и при необходимости переопределите любой из базовых стилей начальной загрузки;например, вы можете захотеть, чтобы ваши кнопки выглядели по-разному и т. д. Обязательно объявите эту пользовательскую таблицу стилей ПОСЛЕ начальной загрузки на главной странице.Как правило, я никогда не настраиваю готовые медиа-запросы.

...