JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.string/2.3.0/underscore.string.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>
<div class="container">
<form class="">
<div>This form is fine!</div>
<div class="row">
<div class="span8">Span 8</div>
<div class="span4">Span 4</div>
</div>
<div class="row">
<div class="span8">
<div class="control-group">
<label class="control-label">Nameddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd88888</label>
<div class="controls">
<input type="text" class="span8" />
</div>
</div>
</div>
<div class="span4">
<div class="control-group">
<label class="control-label">Age</label>
<div class="controls">
<input type="text" class="span4" />
</div>
</div>
</div>
</div>
</form>
<form class="form-horizontal">
<div>This form is broken!</div>
<div class="row">
<div class="span8">Span 8</div>
<div class="span4">Span 4</div>
</div>
<div class="row">
<div class="span8">
<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<input type="text" class="span6" />
</div>
</div>
</div>
<div class="span4">
<div class="control-group">
<label class="control-label">Age</label>
<div class="controls">
...
CSS
.form-horizontal .control-label {
width: 100px;
}
.form-horizontal .controls{
margin-left: 120px;
}
@media (max-width: 480px) {
.form-horizontal .controls {
margin-left: 0;
}
}