html - Bootstrap 右列与左列重叠

Question

我想在 bootstrap 的导航栏中有两列。但是当我这样做并尝试调整大小时，右列与左列重叠。我不明白为什么。我看到视口(viewport)大小为 769px 时出现的问题一直持续到 992px。

HTML

.site-wrapper {
     width: 100%;
     height: 100%;
     min-height: 100%;
     -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
     box-shadow: inset 0 0 100px rgba(0,0,0,.5);
     border-top: 5px solid #5A332B;
     background-color: #ccbb99 !important;
    overflow-y: auto;
 }
.navbar {
    border-radius: 0;
    border: none;
    background-color: #683F36;
}
.navbar-brand {
    cursor: pointer;
    color: #ffffff !important;
    font-family: chalkitup, "sans-serif";
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="site-wrapper">
  <div class="navbar navbar-default">
    <div class="container-fluid" style="background-color: #8c8c8c;">
      <div class="row">
        <div class="col-md-9" style="background-color: #1b6d85;">
          <div class="navbar-header">
            <a class="navbar-brand"><span class="icon ion-arrow-left-c"></span> Back</a>
          </div>
        </div>
        <div class="col-md-3" style="background-color: #3c763d;">
          Scoreboard
        </div>
      </div>
    </div>
  </div>

Answer 1

试试下面的代码

<div class="site-wrapper">
  <div class="navbar navbar-default">
    <div class="container-fluid" style="background-color: #8c8c8c;">
      <div class="row">
        <div class="col-md-9 col-xs-12" style="background-color: #1b6d85;">
          <div class="navbar-header">
            <a class="navbar-brand"><span class="icon ion-arrow-left-c"></span> Back</a>
          </div>
        </div>
        <div class="col-md-3 col-xs-12" style="background-color: #3c763d;">
          Scoreboard
        </div>
      </div>
    </div>
  </div>

我在这里添加了工作示例

.site-wrapper {
     width: 100%;
     height: 100%;
     min-height: 100%;
     -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
     box-shadow: inset 0 0 100px rgba(0,0,0,.5);
     border-top: 5px solid #5A332B;
     background-color: #ccbb99 !important;
    overflow-y: auto;
 }
.navbar {
    border-radius: 0;
    border: none;
    background-color: #683F36;
}
.navbar-brand {
    cursor: pointer;
    color: #ffffff !important;
    font-family: chalkitup, "sans-serif";
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="site-wrapper">
  <div class="navbar navbar-default">
    <div class="container-fluid" style="background-color: #8c8c8c;">
      <div class="row">
        <div class="col-md-9 col-xs-12" style="background-color: #1b6d85;">
          <div class="navbar-header">
            <a class="navbar-brand"><span class="icon ion-arrow-left-c"></span> Back</a>
          </div>
        </div>
        <div class="col-md-3 col-xs-12" style="background-color: #3c763d;">
          Scoreboard
        </div>
      </div>
    </div>
  </div>