0

Подскажите как разместить пункт 1 слева,пункты 2,3,4 по центру,а пункт 5 справа так чтобы при смещении экрана ничего не съезжало

например что-то типо этого

введите сюда описание изображения

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button id="menu" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                    <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand page-scroll nav-ft pull-left" href="#page-top">пункт 1</a>
            </div>

            <div class="collapse navbar-collapse navbar-main-collapse">
                <ul class="nav-ft nav navbar-nav">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#video">пункт 2</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#news">пункт3</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#news">пункт4</a>
                    </li>
                </ul>

                <ul class="nav navbar-nav pull-right">
                    <li>
                        <a class="page-scroll" href="#video">пункт 5</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#news">пункт6</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
3
  • Съезжает из-за того, что пункт4 находится вертикально не по центру, а немного выше
    – Oceinic
    15 сен 2015 в 12:29
  • Для центрального блока сделайте так zaurmag.ru/priemy-verstki-html-css/… А вообще min-width: 1000 15 сен 2015 в 12:34
  • Подскажите как в данном коде разместить пункты 2,3,4 по центру? 15 сен 2015 в 14:10

2 ответа 2

3

Используйте фиксированную ширину сайта или делайте адаптивную верстку.

Либо для .container фикс. ширину

.container {
    width: 960px;
}

Либо при сужении экране меньше 700px (случайное значение) скрывать либо адаптировать меню

@media (max-width: 700px) {
  .navbar .pull-right {
    display: none;
  }
}
1

У вас проблема с размерами шрифтов. Сами позиции пунктов меню маштабируются нормально, просто в текущем размере шрифта у вас надписи уже не влазят.

Вы можете реализовать для каждого варианта размера экрана собственное меню подобрав такой размер шрифта при котором бы помещались все надписи.

Сделать это можно с помощью класов hidden-* и visible-* где * может быть xs,sm,md и т.д. То есть идентификатор вашей ширины, так же как в классах css которыми вы задаете ширину колонок.

например делаем текущий вариант меню видимым только на малых устройствах(visible-sm) и скрываем для остальных (hidden-xs, hidden-md и hidden-lg), а в класе fontSizeSm прописываем размер шрифта для текущей реализации меню.

     <nav class="navbar navbar-default hidden-xs visible-sm hidden-md hidden-lg">
      <div class="container-fluid fontSizeSm">
        ...
      </div>
    </nav>

И так для каждой ширины экрана которая нас не устраивает

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.