У меня были проблемы, и когда я искал в Интернете, я не мог найти решение этой проблемы.
В настоящее время я использую bootstrap для создания своего веб-сайта, но когда я уменьшаю страницу до размера мобильного телефона / планшета, мой список навигационных панелей смещается влево. Я хочу, чтобы он был выровнен по центру, но ТОЛЬКО когда экран маленький. В противном случае, я хочу, чтобы мой список был справа.
Ниже приведен пример кода:
HTML:
<title>ZebarWorld Landing Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="index.css" rel="stylesheet"/>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class = "container-fluid">
<div class ="navbar-header">
<a class="navbar-brand" href="#"><img src="LogoPurple.png"></a>
</div>
<span class="navbar-text">
We're currently under construction.<br>Join our waitlist to be the first to play at Zebra World!
</span>
<ul class="nav navbar-nav myNav">
<li><a class="navi" href="#">Sign Up for Updates!</a></li>
</ul>
</div>
</nav>
</body>
CSS:
html,body{
background-color: #EE870D;
width:100%;
height:100%;
>}
.navbar{
background-color: #FFFFFF;
margin-top: 30px;
}
.navbar-header{
}
.navbar-brand{
}
.navbar-brand img{
max-width:100%;
width: 300px;
height: auto;
}
.navbar-text{
text-align:center;
}
.navbar-nav{
border-radius: 25px;
background: #A12F2F;
padding: 10px;
}
.myNav{
text-align: center;
}
.myNav li{
float:none;
display:inline-block;
}
a.navi{
text-decoration: none;
}
a.navi:link{
color:white;
}
a.navi:visited{
color: white;
}
a.navi:hover{
color: black;
}
a.navi:target{
color: red;
}
https://jsfiddle.net/0jpsyot2/1/