bootstrap如何把表單select input button弄在一行


        bootstrap很多折疊樣式css都已經寫好,可以直接用,很方便。但是,如果遇到一些bootstrap文檔里面沒有的例子,估計很多初學者都懵了,然后會折騰很久也未見得有效。今天主要講如何把select input button弄在一行,因為直接用bootstrap的form-control樣式會出現換行!只需要解決為何換行即可;form-control有個屬性:width:100%,這個是產生換行的原因,所以覆蓋form-control的width:100%樣式為width:auto;即可。例子如下:


   
   
  
  
          
  1. <div class="form-group">
  2. <div class="input-group col-xs-12">
  3. <div class="input-group-btn">
  4. <select name="type" class="form-control" style="width: auto;">
  5. <option value="1">全網 </option>
  6. <option value="2">本站 </option>
  7. </select>
  8. </div>
  9. <input type="text" name="keyword" id="keyword" class="form-control" placeholder="請您輸入關鍵詞">
  10. <span class="input-group-btn">
  11. <button class="btn btn-success" id="search_submit" type="submit">Go </button>
  12. </span>
  13. </div>
  14. </div>



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM