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;
}
}

Ваш ответ

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

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