合併輸入附加輸入附加附加項和spanX類

我正在研究一個小項目，並決定使用Twitter Bootstrap，因爲我不擅長設計！合併輸入附加輸入附加附加項和spanX類

嗯，當我嘗試將它們與.spanX類合併使它們具有相同的大小時，我遇到了input-append和input-prepend元素的問題。

目前這裏的問題是

當我這樣做：

<div class="row-fluid"> 
    <div class="span12 input-append input-prepend"> 
     <span class="add-on"> 
      <i class="icon-user"></i> 
     </span> 
     <span class="span8 uneditable-input text-right">0</span> 
     <span class="add-on"> 
      <i class="icon-tint"></i> 
     </span> 
    </div> 
</div>

一切都很好

如果我添加一個spanX到它完美預謀元素。

<div class="row-fluid"> 
    <div class="span12 input-append input-prepend"> 
     <span class="span2 add-on"> 
      <i class="icon-user"></i> 
     </span> 
     <span class="span8 uneditable-input text-right">0</span> 
     <span class="add-on"> 
      <i class="icon-tint"></i> 
     </span> 
    </div> 
</div>

不過，如果我嘗試把spanX元素附加元素，它不工作了，並佈局被打破

<div class="row-fluid"> 
    <div class="span12 input-append input-prepend"> 
     <span class="span2 add-on"> 
      <i class="icon-user"></i> 
     </span> 
     <span class="span8 uneditable-input text-right">0</span> 
     <span class="span2 add-on"> 
      <i class="icon-tint"></i> 
     </span> 
    </div> 
</div>

因此，沒有人已經有同樣的問題？我查看了該網站，但沒有發現與此問題相關的任何內容。

我知道有時候span元素在代碼中沒有內聯是造成問題的事實，但我沒有經歷過，即使一切都是內聯的，問題仍然存在。

感謝您的閱讀。任何幫助或建議歡迎=）

來源

2013-02-21 Pascal Luxain

所有span*類帶有一個float:left;聲明 - 這是什麼導致你的問題。你可能會更好地創建一個類並根據需要定義寬度。那麼你將不會遇到使用跨度班的麻煩。

你的例子這裏更新：

http://jsfiddle.net/dusthaines/77XEk/3/

來源

2013-02-21 21:21:20 dusthaines

我明白你說什麼，但如果所有的元素有一個'跨度*'類，那麼他們都浮動，應該如下聲明中的順序DOM，他們不應該嗎？我會效法你的榜樣，讓你知道。非常感謝 – 2013-02-22 08:27:57

正如我懷疑它不起作用。首先，我不確定你可以給一個''元素賦予一個寬度而不會使它浮動或者阻塞（甚至'display'的CSS屬性設置爲''inline-block'不起作用，對嗎？ – 2013-02-22 09:01:15

最後你的輸入幫了一個很多！我看起來它是'uneditable-input.span *'元素，失去了它的'float：left'屬性。所以正如你所建議的那樣，我只需要創建一個自定義類來將其返回爲'float：left ;'property！非常感謝！ – 2013-02-22 09:03:08

合併輸入附加輸入附加附加項和spanX類

回答

相關問題