爲什麼我的Twitter Bootstrap表單字段溢出使用流體容器？

Question

更新：此處的問題演示：http://jsfiddle.net/fdB5Q/embedded/result/

從大約767px到998px，表單域比包含的井更寬。比767px

較小，整個表格區域轉移到一個新的生產線。當瀏覽器窗口大約200px寬時呈現的頁面完美顯示。表單字段按照您的預期收縮。

對於視覺，看看這個非常類似的問題： Twitter Bootstrap CSS static-fluid form positioning

這裏的一切都在頭：

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" /> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 

這裏的一切都在身體：

<div class="container-fluid"> 

<div class="row-fluid"> 

<div class="span8"> 
<p>Some Content.</p> 
</div> 

<div class="span4"> 
    <div class="well">  
    <div class="control-group"> 
     <label class="control-label" for="name">Your Name</label> 
     <div class="controls"> 
     <input type="text" class="input-xlarge" name="name" id="name" maxlength="100" /> 
     </div> 
    </div> 
    </div> 
</div> 

</div> 

</div> 

我想我誤解了框架的某些部分。我應該不使用流體容器嗎？我究竟做錯了什麼？我可以把一些東西放在一起來解決這個問題，但我認爲問題可能是我做了錯誤的大事情。

我試圖改變我的跨度7和5，仍然有同樣的錯誤。我嘗試了6和6，但是那時頁面開始顯得很荒謬。其餘的答案對我沒有意義。

我改變了輸入類大而不是XLARGE。它仍然有一個溢出的寬度範圍，如果顯示屏上有空間，我真的很想要更寬的表單域。

我想避免水平滾動條，我想頁面文字是在我的智能手機橫向或波泰特模式相同的尺寸。

UPDATE：圖片

我的問題頁：

簡體版：

小號在200像素寬度的瀏覽器版本implified：

Answer 1

輸入HTML標籤及其相應的.input-*風格只設置CSS width。這是設計。

但添加CSS max-width:100%將確保過大的輸入受到控制。
例如它添加到你的腦袋：

<style> 
    input { 
     max-width: 100%; 
    } 
</style> 

Answer 2

我通常喜歡使用的元素另一class="row-fluid"和class="span12"與class="spanX"得到一些元素的寬度爲100％。這不會導致不同分辨率的錯誤。所以，我在你的元素中添加了另一個row-fluid類，span4類，並且在新row-fluid中加入了span12。你必須重寫默認的Bootstrap設置才能得到你所需要的，所以我也在<input />元素中添加了類.my-input以獲得100％的寬度並刪除左側和右側的填充（填充會導致右側的錯誤）。這裏是代碼：超控

​.my-input 
{ 
    width: 100%; 
    padding: 4px 0 4px 0 !important; 
}​ 

你可以看到和Jsfiddle demo

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span8"> 
      <p>Some Content.</p> 
     </div> 
     <div class="span4 well"> 
      <div class="row-fluid"> 
       <div class="span12"> 
        <label class="control-label" for="name">Your Name</label> 
        <input type="text" class="my-input" name="name" id="name" maxlength="100" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

和CSS類，嘗試調整屏幕。

Answer 3

我只是遇到了這個問題，並且在檢查表單輸入引導文檔它規定「使用相對大小類，如。輸入，或大或使用.span匹配您的輸入到電網列大小*班「。

我的引導行被設置爲span9的內容和側邊欄的span3。設置<input class='span3'/>爲我解決了這個問題，輸入框保留在邊欄內，因爲屏幕縮小了。

Answer 4

如在該答案表示由帕夫洛：Twitter Bootstrap: Stop input field extending beyond well

使用代替輸入XLARGE（或其它尺寸）的類input-block-level解決問題爲好。

Answer 5

只是在玩這些FOREVER（看起來）後的輸入。我使用一個簡單的寬度屬性，並將其設置爲85％到95％，具體取決於容器，填充和其他CSS因素，以防止輸入字段實際伸展到容器的邊緣。

.input-example { 
    width: 90%; 
} 

我不是專家！我只是提供我已經學到的東西，請不要把它當成經驗豐富的開發人員的建議。試圖回饋一個在無數場合拯救了我的生活的社區。

Answer 6

我用表單輸入和麪板體來解決這個問題。我在以下內容中回答了這個問題： Twitter Bootstrap: Stop input field extending beyond well

對我來說問題在於表單溢出。這使投入效仿。通過修復表單的最大寬度（最大寬度：100％），我可以修復輸入以及可能放置在表單中的任何其他內容。

Answer 7

不幸的是，這個問題比所有這些都更危險。使用最大寬度對我沒有任何幫助。我恨的東西找蹩腳的，所以我挖成它一點...

歸結到一點，這三條線的形式控制的CSS聲明：

width: 100%; 
padding: 6px 12px; 
border: 1px solid #cccccc; 

時的寬度文本類型的輸入元素被設置，水平填充和邊框被添加到100％，而不是從中取而代之。因此，如果100％寬度w是500px，那麼文本輸入表單控件的寬度變爲w + 12 + 12 + 1 + 1,526px。額外的26px是一個常量，這意味着除非寬度百分比動態地以100％*（w /（w + 26px））或100％-26px計算，否則事情將永遠不會出現。

我個人認爲這是html/css接口的定義或實現中的一個錯誤（我不知道哪個，我真的不想嘗試在移動的沙子中找到引用標準）。如果你說一個輸入字段的寬度是100％，那麼需要應用校正來使邊緣內的寬度爲100％，而不是100％，而不包括水平填充和邊框寬度。

而且，順便說一下，百分比值或固定大小並不重要;他們也偏離了26px。你需要從寬度中濾掉這26px。

儘管如此，至少如果您使用允許客戶端計算的CSS編譯器，那麼所有的引導文本輸入都不會丟失。例如

input.form-control[type=text] { 
    width: calc(~'100%-26px'); 
} 

會使它更好。請注意，電子郵件和密碼類型（至少）也有同樣的問題。

26px當然是一種脆弱的東西，但常量被硬編碼到窗體控件聲明中，所以你的雙手是捆綁在一起的。一個測試會很好，檢查渲染控件的大小，以便在引導升級時捕獲CSS聲明更改，但不是今晚，謝謝。