0

Имеется проблема в том, что кнопка на пк находиться вот тут: введите сюда описание изображения

А на телефоне вот так: введите сюда описание изображения

Я хочу чтобы положение кнопки на пк, как на телефоне

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="utf-8">
    <title>Atoda</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<header>
    <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="#"><img class="logo" src="logo.png"></a>
        <span class="sign navbar-text">
      Войти
    </span>


    </nav>
</header>
<body>

</body>
</html>


.navbar-nav{
    color: white;
}
.sign{
    padding: 0.3125em 0.625em;
    padding-left: 0.7em;
    color: white;
    border: 1px solid #0d0216;
    border-radius: 1.25em;
    float: right !important;
}
.navbar-expand-lg {
    background: white;
    filter: saturate(5);
}
.navbar-light .navbar-brand{
    color: black;

}
.logo{
    transform: scale(1.2);
}
.logo:hover{
    transform: scale(1.3);
    transition: 0.1s; /* Время эффекта */
}

.navbar-light .nav-link {
    color: #591198!important;
}
.navbar-light .navbar-text {
    color: black;
}

1 ответ 1

0
.navbar.navbar-expand-lg {
    justify-content: space-between;
}

Нужно переопределить стили Bootstrap, он задает:

@media (min-width: 992px) {
.navbar-expand-lg {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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