Блог

Главная - Вопросы по программированию - Навигационные панели расположены друг под другом и также не выровнены по желанию

Навигационные панели расположены друг под другом и также не выровнены по желанию

#html #css #bootstrap-4 #web-frontend

#HTML #css #bootstrap-4 #веб-интерфейс

Вопрос:

Итак, я только начинаю с веб-разработки и изучаю bootstrap. Это мой код,

 <!DOCTYPE html>
<html>
<head>
    <title>IMAGE GALLERY</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <style type="text/css" media="screen">
        .navcolor{
            background-color: #042638;
        }   
        .textcolor{
            color: white;
        }
        .align{
            margin-left: 80px;
        }
        .one{
            width: 40px;
            height: 40px;
            color:white;
        }
    </style>
</head>
<body>
    <nav class=" navbar navabar-default navcolor ">
        <div class="navbar-header">
              <img class="one align" src="https://www.pngkey.com/png/full/212-2129758_ios-gallery-icon-png.png" >
              <a href="#" class="navbar-brand textcolor ">IMGS</a>
        </div>
        <ul class="nav navbar-nav ">
            <li><a class="textcolor" href="#">About</a></li>
            <li><a class="textcolor" href="#">Contact</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a class="textcolor" href="#">Sign Up</a></li>
            <li><a class="textcolor" href="#">Login</a></li>
        </ul>
    </nav>
</body>
</html>

Я знаю, что у меня должен быть отдельный файл для CSS, но я просто пытался что-то сделать. Теперь это определенно кажется очень простым. Я ожидал чего-то подобного.
Но я получил что-то вроде этого.
Игнорируйте логотип ofc. Меня больше беспокоит тот факт, что «About» и «Contact» расположены друг над другом, а также по какой-то причине они находятся посередине. Я попробовал ‘navbar-left’ или ‘pull-left’, но он остается посередине. Любая помощь будет действительно оценена.

Ответ №1:

Вы можете размещать About и Contact рядом друг с другом, используя flexbox:

 .navbar-nav {
  display: flex;
}

Что касается переноса ссылок из середины влево, я бы рекомендовал поместить их в новый <div> и использовать flexbox с justify-content :

 .links {
  display: flex;
  justify-content: space-between;
}

Как это сделано в этом фрагменте:

 <!DOCTYPE html>
<html>

<head>
  <title>IMAGE GALLERY</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <style type="text/css" media="screen">
    .navcolor {
      background-color: #042638;
    }
    
    .textcolor {
      color: white;
    }
    
    .one {
      width: 40px;
      height: 40px;
      color: white;
    }
    
    .navbar {
      display: flex;
    }
    
    .navbar-nav {
      display: flex;
    }
    
    .links {
      flex-grow: 1;
      display: flex;
      justify-content: space-between;
    }
  </style>
</head>

<body>
  <nav class=" navbar navabar-default navcolor ">
    <div class="navbar-header">
      <img class="one align" src="https://www.pngkey.com/png/full/212-2129758_ios-gallery-icon-png.png">
      <a href="#" class="navbar-brand textcolor ">IMGS</a>
    </div>
    <div class="links">
      <ul class="nav navbar-nav ">
        <li><a class="textcolor" href="#">About</a></li>
        <li><a class="textcolor" href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a class="textcolor" href="#">Sign Up</a></li>
        <li><a class="textcolor" href="#">Login</a></li>
      </ul>
    </div>
  </nav>
</body>

</html>