Подключить к странице bootstrap

Есть код:
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
<h1 class="brand"><a href="#top" style="font-family:East Sea Dokdo">English!</a></h1>
<nav class="pull-right nav-collapse collapse">
<ul id="menu-main" class="nav">
<li><a title="текст" href="#portfolio" style="font-family:Oswald">текст</a></li>
<li><a title="текст" href="#news" style="font-family:Oswald">текст</a></li>
<li><a title="текст" href="#services" style="font-family:Oswald">текст</a></li>
<li><a title="текст" href="#team" style="font-family:Oswald">текст</a></li>
<li><a title="текст" href="#contact" style="font-family:Oswald">текст</a></li>
</ul>
</nav>
</div>
<!-- /.container -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar -->
</div>
<!-- /.navbar-wrapper -->
<div id="top"></div>
Как можно это меню адаптировать для мобильных?
Ольга
Ольга
11 апреля 2018, 03:22
modx.pro
969
-1

Комментарии: 3

Баха Волков
Баха Волков
11 апреля 2018, 07:47
+1
1) Стили писать в html не комильфо, если на то нет причины
style="font-family:Oswald"
зачем это делать если у родителя уже есть id:
#menu-main a {
font-family: Oswald, sans-serif
}
2) Bootstrap элементы и так должны быть прекрасно адаптивными (если делать по инструкции)
3) Люди не экстрасенсы и задавать вопрос про css не показывая css…
    Дмитрий
    Дмитрий
    11 апреля 2018, 11:06
    +2
    Да, и это ваш 4-ый вопрос за сутки из разряда «HTML + CSS для самых маленьких». Может, стоит потратить несколько вечеров и самостоятельно освоить азы? В 2018-ом это сделать очень просто. Начиная от бумажных книг и заканчивая всякими HTML Academy — нужно только желание.
      Максим Кузнецов
      Максим Кузнецов
      11 апреля 2018, 11:17
      0
      Адаптивность (по ширине), как правило, формируется из двух составляющих:
      1. нужные элементы и их потомки имеют процентный параметр width или max-width
      2. использование media-запросов для изменения логики отображения нужных элементов при определенной ширине

      Если у вас не адаптируется какой-то элемент (хотя должен, исходя из пунктов выше), вы можете проинспектировать их через консоль (f12 в хроме или пкм по проблемному объекту -> просмотреть код) и таким образом локализовать проблему. Дальше применяем пункты 1 и 2.
        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
        3