Responsive Design Toggle Using Bootstrap

I have this responsive design using Bootstrap's grid system: HTML

Solution 1:

Some answers to your question:

1. This is because there are negative margins influencing the position of each panels from Bootstrap CSS
2. Padding is declared in the parent, and when specifying 100% width on the panels, they will stretch to the content-box width of the parent, which excludes paddings.
3. This is because you have declared the two elements as inline-block elements: this means that the browser will treat them as inline elements when laying them out, and interpreting any whitespace between them as space: so the two elements are treated like two separate words.

---

What I would suggest is that you reset the margins and paddings for the .row element, and then instead of playing with both left and right positions, stick to one. Declare the individual panels as block-level elements, and use absolute positioning. However, since absolute positioning takes them out of the document flow, you will need to declare an explicit height for the parent.

.row {
    overflow:visible;
    position: relative;
    width: 100%;
    height: 50px; /* Or any desired value */
    margin: 0;
}
#panelviewer {
    position: relative;
}
.row > div {
    position: absolute;
    width: 100%;
}
.panel1 {
    display: block;
    background: #ccc;
}
.panel2 {
    display: block;
    background: #eee;
    left: 100%;
}
.open {
    left: -100%;
}

http://jsfiddle.net/teddyrised/7HcQ8/6/

Solution 2:

Following Terry's answer, I ended up doing away with the padding on the parent div view. This brought the divs into line with the exception of the 4px space.

I then used the <!-- --> hack to remove it:

<div class="row">
   <div class="col-xs-12 col-md-6 panel1">
      <a href="javascript:void(0)">ONE</a>
   </div><!--
--><div class="col-xs-12 col-md-6 panel2">
      <br><br><a href="javascript:void(0)">TWO</a>
   </div>
</div>

See jsfiddle

Share