0
У меня возникли проблемы с тем, что navbar-brand придерживается полного права экрана на большом экране 1080 * 1920. То же самое касается navbar-right. Когда вы попадаете на больший экран, маржа создается с помощью начальной загрузки с обеих сторон навигационной панели. Как я могу «исправить» это?Bootstrap Navbar Make Brand и Navbar-Right «Stick» на стороне веб-страницы
Это все мой код:
/* Move body down */
body{
\t position: relative;
\t top: 50px;
}
/*TODO Check what makes the hover items dark blue*/
.navbar {
text-transform: uppercase;
margin-bottom: 0px;
}
.navbar-inverse {
padding-bottom: 70px;
padding-top: 70px;
}
.navbar-inverse .navbar-nav > li > a {
color: white;
}
.navbar-brand {
font-weight: 700;
font-size: 20px;
letter-spacing: 2px;
}
.navbar-inverse .navbar-toggle {
border-color: transparent;
}
.navbar-trans {
background-color:#279ddd;
color:#fff;
}
.navbar-trans li>a:hover,.navbar-trans li>a:focus,.navbar-trans li.active {
background-color:#38afef;
}
.navbar-trans a{
color:#fefefe;
}
/*Drop down menu styling*/
ul.dropdown-menu{
background-color: #279ddd;
}
ul.dropdown-menu {
background-color: #279ddd;
}
ul.dropdown-menu li a{
color: white;
}
/*Dropdown on Hover*/
.sidebar-nav {
padding: 9px 0;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
.navbar .center{
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
/*.first{
border-left: 5px solid transparent;
margin-left: 100px;
}*/<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>
<!-- Navigation -->
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
<!-- Container makes the navbar extend across the whole screen, removing the default curved sides -->
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div id="sidebar_toggle" class="sidebar-toggle-box fa fa-bars tooltips navbar-brand" data-original-title="Toggle Navigation"></div>
<a class="navbar-brand">Pandora</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="hide_on_small_screen"><a href="/"><i class="fa fa-dashboard"></i> Home</a></li>
</ul>
</div><!-- container-collapse -->
</nav>Спасибо. Пожалуйста, дайте мне знать, если я не был достаточно ясен.