文本輸入的控制寬度

我試圖在左側創建一個帶有搜索輸入（文本輸入和「附加」按鈕）的單行，並在右側（網格上方的位）創建一個按鈕：文本輸入的控制寬度

Sample of what I want

下面的代碼：

<form class="row form-inline"> 
    <div class="form-group col-xs-6"> 
     <div class="input-group"> 
      <input name="search" type="text" class="form-control input-sm"> 
      <span class="input-group-btn"> 
       <button class="btn btn-default btn-sm" type="submit"> 
        <span class="glyphicon glyphicon-search"></span> Search 
       </button> 
      </span> 
     </div> 
    </div> 

    <div class="form-group col-xs-6"> 
     <a class="btn btn-default btn-sm pull-right" href="#"> 
      <span class="glyphicon glyphicon-user"></span> Create 
     </a> 
    </div> 
</form>

的問題是，文本輸入的寬度太小在「LG」和「MD」瀏覽器的大小，只增加了一些看起來好的時候瀏覽器是在較小的尺寸。在較大的瀏覽器尺寸下增加搜索輸入寬度的最佳方法是什麼？

來源

2014-08-27 Cocowalla

定義百分比的寬度interms，以便寬大的瀏覽器大尺寸。 – 2014-08-27 10:38:51

我可以知道你的用戶界面應該支持的所有設備是lg/md/sm/xs嗎？如果你想支持ipad類型的設備，那麼使用sm，移動設備-x等。 – Archana 2014-08-27 10:40:24

@Archana只有桌面，但我需要佈局在所有瀏覽器窗口大小（理所當然，當然:) – Cocowalla 2014-08-27 10:42:35

爲什麼不使用引導類設置輸入寬度？例如

<input name="search" type="text" class="form-control col-lg-10 col-md-8 col-sm-12 col-xs-12">

來源

2014-08-27 10:45:12

這似乎沒有任何影響 – Cocowalla 2014-08-27 11:01:22

我猜你正在使用bootstrap3 ive稍微更新我的答案在上面，但這是如何完成的。 – 2014-08-27 11:05:18

我正在使用Bootstrap 3，但我仍然沒有改變你的編輯 – Cocowalla 2014-08-27 11:06:15

試試這個，以及

<form class="row form-inline"> 
    <div class="form-group col-md-8"> 
     <div class="input-group"> 
      <input name="search" type="text" class="form-control col-md-6"> 
      <span class="input-group-btn col-md-2"> 
       <button class="btn btn-default" type="submit"> 
        <span class="glyphicon glyphicon-search"></span> Search 
       </button> 
      </span> 
     </div> 
    </div> 

    <div class="form-group col-md-4"> 
     <a class="btn btn-default pull-right" href="#"> 
      <span class="glyphicon glyphicon-user"></span> Create 
     </a> 
    </div> 
</form>

來源

2014-08-27 10:52:17 Archana

不，最終看起來一團糟，根據瀏覽器窗口的大小，控件按行和不同位置分開 – Cocowalla 2014-08-27 11:00:03

正如你可以引導DOC形式直插看到需要設置輸入COMPONENTES寬度：

http://getbootstrap.com/css/#forms-inline

爲了解決這個問題，我有自定義類爲：

.input-width-X {width: X} 
.input-width-Y {width: Y} 
...

並對這些類使用媒體查詢，以便在您不處於XS模式時應用它們，因爲Bootstrap設置爲100％寬度。

對不起，我的英語:)

來源

2014-08-27 11:47:21 kurroman

文本輸入的控制寬度

回答

相關問題