Bootstrap HTML carriage return - html

Question

After one hour for isolating the problem, I can post this :)
I've a problem with local file but not in production. THe only difference is that on production, html files are inlined.
I'm using default bootstrap 3.3.5 and this css class :
<style>
.v-center {
display: inline-block;
float: none;
}
</style>
My problem is that I don't have the same result with both code :
Code 1 :
<div class="row">
<div class="col-md-4 v-center">
col-md-4
</div><div class="col-md-8 v-center">
col-md-8
</div>
</div>
Code 2 :
<div class="row">
<div class="col-md-4 v-center">
col-md-4
</div>
<div class="col-md-8 v-center">
col-md-8
</div>
</div>
You can found here two examples :
http://relationeo.com/test.html
http://relationeo.com/test2.html
The bug is happening when window with is > 990px.
Why the carriage return breaks the col ?
Thanks

Answer 1

The problem is your CSS class "v-center". It sets the display to inline-block. With inline-block white space comes into play (at least the first character of white space, anyways). Just as you would expect:
Just
Testing
To be rendered as Just Testing rather than JustTesting, the same applies to inline or inline-block elements.
Long and short, don't mess with the Bootstrap grid if you expect to have consistent results. If you need to apply other classes, do so within the grid div, not on the same div. For example:
<div class="col-md-8"> <!-- this is grid div, so no other classes here -->
<div class="v-center">
...
</div>
</div>