Bootstrap right column overlaps the left column

Question

I am trying to have two columns in a navigation bar in bootstrap. But when I do, and I try resizing, the right column overlaps the left. I can't understand why. I see the problem arising from viewport size 769px and persists upto 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>

score 1 · Accepted Answer · answered Feb 08 '17 at 10:22

Try below code

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

I have added working example here

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

Yep that worked too. On a sidenote, can we affix the second column? (I will accept the answer as soon as I am allowed to.) — Ayan, Feb 08 '17 at 10:26
glad to help you :) I don't understand your question means where you want to affix? — vedankita kumbhar, Feb 08 '17 at 11:35
I meant on scroll, I want to fix the second column to the top of screen. — Ayan, Feb 08 '17 at 11:46
If you want like this http://stackoverflow.com/a/2153775/1306170 the you can do on you code also — vedankita kumbhar, Feb 08 '17 at 11:51

score 0 · Answer 2 · answered Feb 08 '17 at 10:23

0

Alright, I eventually found the answer to my own question. I had to add the clearfix class to the first column in the row. Although it fixed my issue, still would like to know if there are any other views.

answered Feb 08 '17 at 10:23

Ayan

2,738
3
35
76

score 0 · Answer 3 · answered Feb 08 '17 at 10:38

<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 right column overlaps the left column

3 Answers3