как настроить содержимое моей панели навигации при изменении разрешения экрана - PullRequest
Новая
       3

как настроить содержимое моей панели навигации при изменении разрешения экрана

0 голосов
/ 17 октября 2019

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

, но у меня проблема, она не подходит, когда разрешение экранаизменяется, логотип скрывает заголовок моей страницы

Мой логотип должен плавать между панелью навигации и содержимым моей страницы

Как настроить логотип и заголовок для изменения при смене экранаразрешение? 

<nav class="navbar navbar-custom">
  <img src="http://www.smartinteriors.net/wp-content/uploads/2013/12/200x300.gif" class="logo img-fluid" alt="">
  <a class="navbar-brand title-page mx-auto">Title page</a>
</nav>

.navbar-custom {
  background-color: #A1241B;
  height: 100px;
}

.logo {
  display: inline;
  position: absolute;
  top: 1em;
}

jsfiddle

Ответы [ 3 ]

0 голосов
/ 17 октября 2019

Вот решение при изменении размера экрана. 

.navbar-custom {
  background-color: #A1241B;
  height: 100px;
}

.logo {
  display: inline;
  position: absolute;
  top: 1em;
}
@media (max-width: 767px) { 
.logo {
    top: 6em;
    left: 0px;
    right: 0;
    width:100%;
    
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-custom">
  <img src="http://www.smartinteriors.net/wp-content/uploads/2013/12/200x300.gif" class="logo img-fluid" alt="">
  <a class="navbar-brand title-page mx-auto">Title page</a>
</nav>
0 голосов
/ 17 октября 2019

Ваш ответ заключается в использовании @media Queries. Проверьте эту ссылку www.w3schools.com / mediaquery.asp

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

Для получения информации о макетах Flex перейдите по этой ссылке css-tricks.com / flex

0 голосов
/ 17 октября 2019

Вы можете использовать этот код 

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Hello, world!</title>
  <style type="text/css">
    body {
      margin: 0;
    }
    
    .navbar-custom {
      background-color: #A1241B;
      height: 100px;
    }
    
    .logo {
      display: inline;
      position: absolute;
      top: 1em;
    }
    
    @media only screen and (max-width: 767px) {
      .img-fluid {
        max-width: 100%;
        height: auto;
        width: 150px;
      }
    }
    
    @media only screen and (max-width: 480px) and (min-width: 320px) {
      .img-fluid {
        max-width: 100%;
        height: auto;
        width: 100px;
      }
    }
  </style>
</head>

<body>
  <nav class="navbar navbar-custom">
    <img src="http://www.smartinteriors.net/wp-content/uploads/2013/12/200x300.gif" class="logo img-fluid" alt="">
    <a class="navbar-brand title-page mx-auto">Title page</a>
  </nav>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...