布局 搜索樣式 html

原文：https://blog.csdn.net/linlinxie/article/details/77484214?utm_source=blogkpcl4

 

 

測試1：

 

<div class="panel panel-default">
    <div class="panel-heading">搜索</div>
    <div class="panel-body">
        <form role="form" id="searchForm" class="form-inline">
            <div class="form-group">
                <label for="sname1">用戶名</label> <input type="text"
                                                        class="form-control" id="sname1" name="sname1" placeholder="請輸入名稱">
            </div>
            <div class="form-group">
                <button type="button" id="searchBtn" class="btn btn-default">開始搜索</button>
            </div>
        </form>
    </div>
</div>

 

 

 

 

測試2：

<form role="form" id="searchForm" class="form-inline">
    <div class="form-group">
        <label for="sname1">用戶名：</label>
        <input type="text" class="form-control" id="sname1" name="sname1" placeholder="請輸入名稱">
    </div>
    <div class="form-group">
        <button type="button" id="searchBtn" class="btn btn-default">開始搜索</button>
    </div>
</form>