Bootstrap系列 -- 13. 內聯表單

 

　　有時候我們需要將表單的控制元件都在一行內顯示。在Bootstrap框架中實現這樣的表單效果是輕而易舉的，你只需要在<form>元素中新增類名“form-inline”即可

 

　　如果你要在input前面新增一個label標籤時，會導致input換行顯示。如果你必須新增這樣的一個label標籤，並且不想讓input換行，你需要將label標籤也放在容器“form-group”中

<form class="form-inline" role="form">
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail2">郵箱</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="請輸入你的郵箱地址"/>
        </div>
        <div class="form-group">
            <label class="sr-only" for="exampleInputPassword2">密碼</label>
            <input type="password" class="form-control" id="exampleInputPassword2" placeholder="請輸入你的郵箱密碼"/>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"/>
                記住密碼
   
            </label>
        </div>
        <button type="submit" class="btn btn-default">進入郵箱</button>
</form>

 

　　在label標籤運用了一個類名“sr-only”，可以將label標籤影藏起來