twitter-bootstrap - ブートストラップフォームの入力フィールドの配置

Question

私は以下のコードを持っています

<form id="editProfileForm" class="form-horizontal span8"  method="post">  
    <div class="control-group">
        <label class="control-label" for="inputSubject">Subject</label>
        <div class="controls">
            <input type="text" id="inputSubject" class="span8" >
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="inputTags">Tags</label>
        <div class="controls">                            
            <input type="text" id="inputTags" class="span3">  
        </div>        
    </div> 

    <div class="control-group">
        <label class="control-label" for="inputAccess">access</label>
        <div class="controls">                            
            <input type="text" id="inputAccess" class="span3">  
        </div>        
    </div>

以下のようなフォームが表示されます

誰かが私に以下のようになる方法を提案できますか？ご協力いただきありがとうございます

JSフィドルリンクhttp://jsfiddle.net/kLuB3/331/

Answer 1

form-inlineよりもこれに適していform-horizontalます。

これを試して：

<form id="editProfileForm" class="span8 form-inline" method="post">
    <div class="row">
        <label class="span1" for="inputSubject">Subject</label>
        <input type="text" id="inputSubject" class="span7">
    </div>
    <div class="row">
        <label class="span1" for="inputTags">Tags</label>
        <input type="text" id="inputTags" class="span3">
        <label class="span1" for="inputAccess" id="inputAccessLabel">access</label>
        <input type="text"id="inputAccess" class="span3">
    </div>
</form>

この CSS では:

#inputTags, #inputAccess {
    float: left !important;
}
#inputAccessLabel {
    margin-left: 35px;
    margin-right: 5px;
}

jsフィドル