JSFiddle - React, Tailwind, and code Playground

by olvlvl

HTML

<link rel="stylesheet" href="https://raw.github.com/twitter/bootstrap/2.1.0-wip/docs/assets/css/bootstrap.css">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" />

<h1>Alignment issues</h1>

<div class="well">
    <select>
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
    </select>
    
    <input type="text" value="Lorem" />
    
    <div class="btn-group">
    <button class="btn">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>
    </div>
    
    <button class="btn">Button</button>
    <a class="btn" href="#">Button</a>
    <span class="btn">Button</span>
    <input class="btn" type="button" value="Button" /><!-- this one doesn't have the same height -->
</div>

<p>Because select and input elements have bottom margins they don't align with buttons or button groups which have none. To get rid of the margins on inputs and selects we have to add the <code>.form-inline</code> class on a container:</p>

<div class="well form-inline">
    <input type="text" value="Lorem" />
    <button class="btn">Button</button>
</div>

<p>I find this infortunate that we have to use <code>.form-inline</code> when we could move the margin to <code>.controls-group</code></p>

<div class="well">
    <div class="control-group">
        <div class="controls">
        <input type="text" value="Lorem" />
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
             <div class="control">
                <input type="text" value="Lorem" />
                <input type="text" value="Lorem" />
            </div>
            <div class="control">
                <input type="text" value="Lorem" />
            </div>
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
        <input type="text" value="Lorem" />
        </div>
    </div>
</div>

<h2>Buttons group</h2>

<div class="well">
    <input...

CSS

body {
    
    padding: 20px;
    
}

.btn-group {
    display: inline-block !important;
}