修改Bootstrap折叠的移动菜单宽度。 （不编辑崩溃断点）

Question

我想修改Bootstrap菜单的可折叠部分的样式，以便它不会拉伸移动屏幕的整个宽度。我想在每侧15px推它，所以当点击.navbar-toggle按钮并且菜单崩溃时，你也可以看到背景。我试过这个：

.navbar-collapse {
   padding-right: -15px;
   padding-left: -15px;
}

然而这不起作用。我在下面放了一些Photoshop模型来帮助解释我需要实现的目标，这里是标记：

<div class="container hidden-lg hidden-md hidden-sm" style="margin-bottom:-20px;">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <div class="row">
                <a class="" href="/"><img src="/assets/img/logosmall.png" style="height:30px;" /></a>
                <a style="color: white; margin-left:5px;" class="pull-right btn btn-info btn-xs" href="/pay/">Instant Pay</a>
                <hr style="border-top: 1px solid #ffc107; padding:0px; margin: 7px 0px 5px 0px">
            </div>
            <div class="row">
                <a class="mobilebar_elements col-xs-5" href="/login/">Login</a>
                <a class="mobilebar_elements col-xs-5" href="/signup/">Signup</a>
                <button style="padding-top:3px; margin-bottom:3px; margin-top:3px;" type="button" class="navbar-toggle collapsed col-xs-1" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
            <div>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="/">Home</a></li>
            <li><a href="#tenantsandowners" class="tenantsandowners_link">Tenants & Property Owners</a></li>
            <li><a href="#payment" class="payment_link">Payment Options</a></li>
            <li><a href="#paymentpage" class="paymentpage_link">Personalised Payment Page</a></li>
            <li><a href="/contact/">Contact Us</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
</div>

CSS（Full CSS Here）：

.navbar-collapse {
  padding-right: 15px;
  padding-left: 15px;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.navbar-collapse.in {
  overflow-y: auto;
}
@media (min-width: 768px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: visible;
  }
  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
  }
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
  max-height: 340px;
}
@media (max-device-width: 480px) and (orientation: landscape) {
  .navbar-fixed-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    max-height: 200px;
  }
}
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
  margin-right: -15px;
  margin-left: -15px;
}
@media (min-width: 768px) {
  .container > .navbar-header,
  .container-fluid > .navbar-header,
  .container > .navbar-collapse,
  .container-fluid > .navbar-collapse {
    margin-right: 0;
    margin-left: 0;
  }
}
.navbar-static-top {
  z-index: 1000;
  border-width: 0 0 1px;
}
@media (min-width: 768px) {
  .navbar-static-top {
    border-radius: 0;
  }
}