bootstrap很多折疊樣式css都已經寫好,可以直接用,很方便。但是,如果遇到一些bootstrap文檔里面沒有的例子,估計很多初學者都懵了,然后會折騰很久也未見得有效。今天主要講如何把select input button弄在一行,因為直接用bootstrap的form-control樣式會出現換行!只需要解決為何換行即可;form-control有個屬性:width:100%,這個是產生換行的原因,所以覆蓋form-control的width:100%樣式為width:auto;即可。例子如下:
-
<div class="form-group">
-
<div class="input-group col-xs-12">
-
<div class="input-group-btn">
-
<select name="type" class="form-control" style="width: auto;">
-
<option value="1">全網
</option>
-
<option value="2">本站
</option>
-
</select>
-
</div>
-
<input type="text" name="keyword" id="keyword" class="form-control" placeholder="請您輸入關鍵詞">
-
<span class="input-group-btn">
-
<button class="btn btn-success" id="search_submit" type="submit">Go
</button>
-
</span>
-
</div>
-
</div>