JSFiddle - React, Tailwind, and code Playground

by Andy You

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<div class="container-fluid">
    <div>
        <form class="aform-horizontal">
            <fieldset>
                <legend>Basic Information</legend>
                <div class="row-fluid">
                    <div class="span4">
                        <div class="control-group">
                            <label class="control-label">姓名</label>
                            <div class="controls">
                                <input type="text" name="date" placeholder=".input-block-level works fine!" class="input-block-level" />
                            </div>
                        </div>        
                    </div>        
                    <div class="span4">
                        <div class="control-group">
                            <label class="control-label">職業</label>
                            <div class="controls controls-hasappend">
                                <div class="input-wrapper">
                                <div class="input-append">
                                    <input type="text" name="date" placeholder="老闆我可以嗎" class="input-block-level" />
                                        <span class="add-on btn"><i class="icon icon-chevron-down"></i></span>
                                </div>
                                </div>
                            </div>
                        </div>        
                    </div>        
                    <div class="span4">
                        <div class="control-group">
                            <label class="control-label">生日</label>
                            <div class="controls controls-hasappend">
                                <div class="input-wrapper">
                 ...

SCSS

.controls-hasappend {
  .input-wrapper {
    width: 100%;
    display: table;
  }
  .input-append {
      width: 100%;
      display: table-row;
      .add-on {
        display: table-cell;
        border-left: none;
        width: 20px;
      }
      input {
        display: table-cell; 
        width: 100%;
      }
   }
}

.form-horizontal {
    .controls-hasappend {
        width: auto;
        display: block;
        .input-append .add-on {
            vertical-align: middle;
        }
    }
    .control-label {
        width: 60px;
    }
    .controls {
        margin-left: 70px;
        input {
            width: 100%;
        }
    }
}