如何在Twitter Bootstrap的網格系統中的列中設置輸入的寬度？

我是新來引導，至今恩愛，但有幾個簡單的問題做與電網 - 似乎無法在任何地方找到答案......如何在Twitter Bootstrap的網格系統中的列中設置輸入的寬度？

<div class="container"> 
    <div class="row" style="background-color: #ccc;"> <!-- 1. How do I get this background colour to exclude the left 20px gutter? --> 

     <div class="span5"> 
      Left Col 

      <div class="row"> 
       <div class="span5"> 
        <input class="span5" type="text"/> <!-- 2. How do I stop this input from shifting right 20px in IE7? --> 
       </div> 
      </div> 

     </div> 

     <div class="span7"> 
      Right Col 

      <div class="input-prepend"> 
       <!-- This lines up correctly, even in IE7 - my star hack will break this --> 
       <span class="add-on">+</span><input type="text" placeholder="Add..." class="span6"> 
      </div> 
     </div> 
    </div> 
</div>

已經檢查bootstrap css我可以看到.row首先將margin-left拉回20px，這樣每次創建.spanX時，左邊都會有一個20px的裝訂線。這是有道理的，但我怎樣才能應用整個行的樣式（例如背景顏色），並將其應用於該行內的所有列（在我的示例中爲span5和span7），但不包括左側20px的裝訂線？
其次，設置列內元素寬度的最佳方法是什麼？在我的例子中，我試圖調整文本框的大小，將其放在與span5嵌套的行中來填充左側列的寬度。這在IE7中不起作用 - 相反，它向右移動了20px，我失去了右手邊的溝槽。

要查看此信息，請查看IE7中的http://jsfiddle.net/jRcJG/與優秀的瀏覽器。

我得到的最接近是放在一起的IE劈死再次轉移的投入，但這會導致其他問題，如在右列擠壓了輸入前置：

http://jsfiddle.net/JsBpV/

不幸的是，我正在進行的項目必須支持IE7，所以我沒有忽略這些用戶的奢侈。

感謝您的幫助！

來源

2012-06-19 Matt Wilson

與.span12你.span5和span7創建一個div和包括排/跨度的另一個層面
jQuery的

來源

2012-06-19 16:45:30 baptme

謝謝，現在看起來如此明顯，現在你已經說過了......深厚的嵌套讓我的心靈稍微有一點點，但這對我的第一個問題來說是一個很好的解決方案。 –

@MattWilson第二個問題，jQuery。我會稍後發佈一些代碼 – baptme

＃2一個簡單但不一定優雅的解決方案是增加一個一個類裏面IE星黑客：

input.ie-fix-left, textarea.ie-fix-left { 
    *margin-left: -20px; 
}

這就要求你把一類是受此問題影響的每個輸入元素：

<div class="row"> 
    <div class="span6"> 
     <input type="text" class="span6 ie-fix-left"/> 
    </div> 
</div>

來源

2012-06-20 10:39:57

好的，你在哪裏找到這個？ – baptme

剛剛提出了一些CSS後襬弄它。似乎正在做的伎倆，它是相當快速和容易的添加類，當我發現一個輸入漂移在右邊在IE7 –

如何在Twitter Bootstrap的網格系統中的列中設置輸入的寬度？

回答

相關問題