Question

我试图在bootstrap的导航栏中有两列。但是当我这样做，并且我尝试调整大小时，右列重叠左边。我不明白为什么。我看到视口大小为769px引起的问题，并且持续到992px。

HTML

＆＃13;

.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";
}

＆＃13;

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

＆＃13;

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>

我在这里添加了工作示例

＆＃13;

.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";
}

＆＃13;

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

＆＃13;

Answer 2

好吧，我最终找到了自己问题的答案。我必须将clearfix类添加到行的第一列。虽然它解决了我的问题，但仍想知道是否还有其他观点。

Answer 3

<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-sm-9 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-sm-3 col-md-3" style="background-color: #3c763d;">
          Scoreboard
        </div>
      </div>
    </div>
  </div>
  
  You missed to use col-sm-... for small devices

Bootstrap右列与左列重叠

3 个答案: