-1

(Note: This site only works with Chrome, IE will not display it as it does not support the Fetch spec yet)

http://greggum.com/#/entity-shell/entityDetails/14

If you go to this page, there is a row with two child divs that should both fit on one row. One has a class of col-sm-8 and the second col-sm-4 But instead, the second wraps below the first.

The issue is with the splitter that is used on the page. If I remove the splitter, then it works ok. But I don't know what to do to resolve.

It also works if I change the second one to col-sm-3 But then it does not fill the entire area.

How do I make this work?

danopz
  • 3,310
  • 5
  • 31
  • 42
Greg Gum
  • 33,478
  • 39
  • 162
  • 233
  • Please include enough code in the question itself to successfully recreate the issue you're having when you're seeking debugging help – Zach Saucier Sep 08 '16 at 12:58

2 Answers2

0

I am not sure why, but this fixed the issue:

.row div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
Greg Gum
  • 33,478
  • 39
  • 162
  • 233
  • 1
    This is because changing `box-sizing` affects the way the box model of elements works. By using `border-box`, the padding is taken from the total width declared instead of adding to it, which was causing the wrapping – Zach Saucier Sep 08 '16 at 12:59
  • Thank you. If you want to post this as the answer, I will accept. – Greg Gum Sep 08 '16 at 22:44
-1

This seems to fix it.

change

<div class="row">

to 

<div class="row-fluid">

courtesy: http://odetocode.com/blogs/scott/archive/2013/01/08/why-use-the-bootstrap-grid.aspx

Sudhir Kumar
  • 1