Bootstrap Navbar Make Brand和Navbar-Right＆＃34; Stick＆＃34;到网页的一侧

时间：2015-08-27 21:53:42

标签： javascript html css twitter-bootstrap

我无法确保navbar-brand在更大的1080 * 1920屏幕上坚持屏幕的完整右侧。同样适用于navbar-right。当您进入更大的屏幕时，导航栏两侧的引导程序会创建边距。我怎样才能修复＆＃34;是什么？

这是我的全部代码：

＆＃13;
＆＃13; 
/* Move body down */
body{
	position: relative;
	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;
}*/
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

谢谢。如果我不够清楚，请告诉我。

1 个答案:

答案 0 :(得分：2)

使用container-fluid代替container。

＆＃13;
＆＃13; 
/*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;
}*/
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!-- 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-fluid">
    <!-- 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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题