JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<form class="form-horizontal container">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input class="form-control">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">手机号</label>
<div class="col-sm-10">
<input class="form-control">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">电子邮箱</label>
<div class="col-sm-10">
<input class="form-control">
</div>
</div>
</form>
CSS
.justify-container {
justify-content: space-between;
display: flex;
}
.justify-cell {
width: 1em;
height: 1em;
}
JavaScript
var justifyText = $('label'),
temp = '';
for (var i = 0; i < justifyText.length; i++) {
temp = justifyText[i].textContent;
justifyText[i].innerHTML = temp.replace(/./g,'<div class="justify-cell">$&</div>');
}
$('label').addClass('justify-container');