Bug in Bootstrap grids

While working on a web form using Bootstrap, I ran into a very strange issue with the grid system. I am not sure if I should qualify it as a bug, but it is definitely very annoying, and not the expected behavior.

I created a page containing code like this:

<div class="container">
  <div class="col-sm-4 form-group">
    <label for="ContactName">Name</label>
    <input type="text" class="form-control" id="ContactName" placeholder="FirstName LastName">
  </div>
  <div class="col-sm-4 form-group">
    <label for="ContactEmail">Contact Email</label>
    <input type="email" class="form-control" id="ContactEmail" placeholder="username@example.com">
  </div>
  <div class="col-sm-4 form-group">
    <label for="ContactPhone">Contact Phone</label>
    <input type="phone" class="form-control" id="ContactPhone" placeholder="(xxx) xxx-xxxx">
  </div>
</div>

What happened was that when the browser window was smaller than the breakpoint for col-sm (less than 992 pixel wide), the input fields became semi-disabled. I could not click on them to select them and enter values, and the cursor did not change into an insert-point like it should. For all purposes it looked like the field had been disabled. But using the tab key, it was possible to go to the field and enter values. When I made the browser wider, it suddenly worked again. The issue occured in IE and Firefox, both the latest versions.

The solution was to put the columns into a div with the row class. Suddenly it all worked:

<div class="container">
  <div class="row">
    <div class="col-sm-4 form-group">
      <label for="ContactName">Name</label>
      <input type="text" class="form-control" id="ContactName" placeholder="FirstName LastName">
    </div>
    <div class="col-sm-4 form-group">
      <label for="ContactEmail">Contact Email</label>
      <input type="email" class="form-control" id="ContactEmail" placeholder="username@example.com">
    </div>
    <div class="col-sm-4 form-group">
      <label for="ContactPhone">Contact Phone</label>
      <input type="phone" class="form-control" id="ContactPhone" placeholder="(xxx) xxx-xxxx">
    </div>
  </div>
</div>

Hope this will help someone!