Bootstrap Navbar Make Brand and Navbar-Right "Stick“to to webpage

Question

在更大的1080*1920屏幕上，我无法确保navbar-brand完全位于屏幕的右侧。navbar-right也是如此。当你进入更大的屏幕时，导航栏两侧的bootstrap会创建一个边距。我该如何“修复”它呢？

这是我所有的代码：

​

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

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

​

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

Answer 1

使用container-fluid而不是container。

​

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

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

​