Как сжать Boostrap navbar в одну строку? - PullRequest
Новая
       7

Как сжать Boostrap navbar в одну строку?

0 голосов
/ 12 октября 2018

В настоящее время у меня есть панель навигации со слишком большим количеством ссылок, поэтому она переходит на другую строкуМожно ли как-нибудь ограничить его одной строкой со всем содержимым, но просто уменьшить его?

Мой код: 

<div class= "collapse navbar-collapse navbar-ex1-collapse">
     <ul class= "nav navbar-nav>
          <li class="active"><a href ="#" Home</a></li>
          <li> <a href="#" Link </a></li>

Но расширено более чем на 20 индексов списка.Предыдущий сайт был сделан с использованием 22 столбцов в одной строке, но мне нужно, чтобы навигация была отзывчивой.

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

<li> <a href="#" Health and Safety Policy</a></li>

Это просто заставит навигационную панель перейти на другуюсразу, так как она слишком большая.

Я попытался уменьшить размер текста, используя разрывы строк и поместив панель навигации в класс строк.

1 Ответ

0 голосов
/ 12 октября 2018

Я думаю, вы хотите вертикальное меню на маленьком экране и горизонтальное меню на рабочем столе. 

<nav>
  <ul>
    <li>Heart is where home is</li>
    <li>We live to work for our clients</li>
    <li>You might want to see our work</li>
    <li>Find us on google maps before visiting</li>
    <li>Got FAQs? search or contact us to get sorted</li>
  </ul>
</nav>

и css 

ul,li{
  margin:0;
  padding:0;
}
li{
  list-style:none;
  border-bottom:none;
  text-decoration:underline;
  border:1px solid black;
  padding:5px;
}
li:hover{
  cursor:pointer;
  color:lightgrey;
}
nav
{
 display:block;
 color:white;
 background:grey;
 width:300px;
}

@media screen and (min-width:922px){
  nav{
    width:100%;
    text-align:center;
  }
  nav,
  ul{
    display:flex;
    background:lightblue;
  }
  li{
    transition: color 1s ease-in;
  }
  li:hover{
    color:grey;
  }
}

Я создал кодовую ручку. Посмотрите , и если это решит вашу проблему.

...