Bootstrap CSS問題使用框尺寸，自舉輸入框和圖標不正確對齊

在我現有的CSS中，我有框大小樣式。Bootstrap CSS問題使用框尺寸，自舉輸入框和圖標不正確對齊

*, 
*:before, 
*:after { 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     box-sizing: border-box; }

包括引導到項目中，我才知道輸入框和圖標的顯示使用引導程序是不正確的。通過小提琴調查我知道這是因爲以上的風格。請參閱的引導方式顯示：

在IE中：
enter image description here

在FF：
enter image description here

下面是一個使用引導款式我的html代碼：

<div class="input-prepend" style="border:dashed 1px;"> 
     <i class="icon-calendar"></i> 
     <input id="handle" type="text" placeholder="Twitter Handle">   
    </div> 

Start date 
    <div class="input-append date" id="dpFrom" data-date="@Model.StartDate.ToString("dd/MM/yyyy")" data-date-format="dd/mm/yyyy"> 
     <input class="span2" size="16" value="@Model.StartDate.ToString("dd/MM/yyyy") " readonly="readonly" type="text"> 
     <span class="add-on" style="border: dashed 1px red;"><i class="icon-calendar"></i></span> 
    </div>

我調查結果

我嘗試刪除盒子大小的樣式和引導程序的東西已修復，但還有另一個問題。我開始在我的網頁中獲得水平滾動條。

我對CSS有一點了解，但不幸的是我無法修復它，因爲我剛剛在2天前啓動了Bootstrap。你能幫我解決這個問題嗎？

非常感謝您的時間，指導和幫助我。

來源

2013-10-25 Toubi

這是一個非常糟糕的主意。你應該修理你的墊子以去除多餘的水平空間，然後擺脫那個規則。開發工具將幫助你。 – SLaks

@SLaks它是現有的代碼，我不知道它爲什麼是，它會影響到什麼地方。 – Toubi

是的，但是這會完全破壞Bootstrap以及您使用的任何其他第三方CSS。 – SLaks

這是拳擊尺寸問題，對於一些領域，我不得不將它設置爲內容框。

來源

2013-10-29 04:49:33 Toubi

通過查看您的圖片：這不是盒子尺寸問題，但輸入字段空間顯示爲默認情況下不同的瀏覽器具有不同的樣式。因此，您應該嘗試使用margin: 0; padding: 0;作爲輸入字段

另外定義高度可能會對您有所幫助。並對這些元素應用顯示內聯或內嵌塊或表格單元格，並將其垂直對齊到頂部或中部。

來源

2013-10-25 02:25:41

錯了。他使用Bootstrap來規範化所有的事情，但Bootstrap由於盒子大小不對而變得混亂。 – SLaks

Bootstrap CSS問題使用框尺寸，自舉輸入框和圖標不正確對齊

回答

相關問題