使用響應式Twitter內容重疊水平表單的麻煩引導程序

我花了更多的時間比我曾經關心承認嘗試修復這個愚蠢的錯誤。我有一個顯示在某些內容左側的表單。它在寬而窄的屏幕上看起來不錯，但是在平板寬度上（它覆蓋770到950之間），右側的內容與表單域重疊。使用響應式Twitter內容重疊水平表單的麻煩引導程序

我是否在我的標記中缺少某些內容以正確使用Twitter Bootstrap，或者是否需要使用斷點添加一些自定義樣式來修復它？看起來固定的像素寬度導致了在bootstrap.css中定義的問題。這些寬度屬性不應該使用％，因爲我使用的是流體響應佈局？ enter image description here

<div class="container-narrow"> 
    <div class="content"> 
    <div class="row-fluid"> 
     <div class="span5"> 
     <form class="form-horizontal" id="applies-Step1-form" action="/" method="post"> 
      <div class="control-group"> 
      <label class="control-label required" for="Step1_email">Email <span class="required">*</span></label> 
      <div class="controls"> 
       <input size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" /> 
      </div> 
      </div> 

      <div class="control-group"> 
      <label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label> 
      <div class="controls"> 
       <input size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" /> 
      </div> 
      </div> 
     </form> 
     </div> 

     <div class="span7"> 
     <div class="promo-btm"> 
      <h2>Heading 2</h2> 
      <ul class="checks"> 
      <li>Bullet One</li> 
      <li>Bullet Two</li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

見附件截圖爲bug或者你可以用我自己fiddle重現。

如果有人能幫助指出一種方法來解決這個問題，我會非常感激！

來源

2013-01-17 Cofey

只需爲您的輸入元素添加一個寬度，以便它們可以響應您的所有屏幕尺寸。您可以在輸入元素使用類似.span12的寬度和應該解決的問題：

HTML

<div class="container-narrow"> 
    <div class="content"> 
    <div class="row-fluid"> 
     <div class="span5"> 
     <form class="form-horizontal" id="applies-Step1-form" action="/" method="post"> 
      <div class="control-group"> 
      <label class="control-label required" for="Step1_email">Email <span class="required">*</span></label> 
      <div class="controls"> 
       <input class="span12" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" /> 
      </div> 
      </div> 

      <div class="control-group"> 
      <label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label> 
      <div class="controls"> 
       <input class="span12" size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" /> 
      </div> 
      </div> 
     </form> 
     </div> 

     <div class="span7"> 
     <h2>Heading 2</h2> 
     <ul class="checks"> 
      <li>Bullet One</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div>

演示：http://jsfiddle.net/yR7Ap/18/

來源

2013-01-18 00:04:01

您的表單對於.span5列來說太寬了。嘗試超過這個補充說：

<div class="row-fluid"> 
    <div class="span5">hello</div> 
    <div class="span7">world</div> 
</div>

，並添加以下樣式：

.row-fluid > div { outline: 5px solid green; }

，你就會明白我的意思。

來源

2013-01-17 23:53:46 thebjorn

我明白你的意思了。有無論如何使用Bootstrap的核心風格來解決這個問題，還是我需要編寫一堆包含不同寬度的自定義CSS來適應媒體樣式？ – Cofey

另外，我不需要它給左邊標籤的所有空間。我還希望它們是左對齊的，但是當我添加水平形式的類時，它們使它們右對齊。 – Cofey

如果你想使用橫向格式，你可能需要使用大量的表單佔用的空間（我不是設計師，所以我認爲看起來更好;-)你可以玩設置spanX類在你的表單元素上，但我還沒有找到任何內置的方式來做你想要的。 – thebjorn

的其他職位已經查明的根本原因問題，你的表單太寬了span5 div與默認引導css

雖然它不是太困難，但它適合。看看這有助於：http://jsfiddle.net/panchroma/FXXaZ/

我已經收緊了你的形式與這個CSS：

/* pull control label left */ 
.form-horizontal .control-label { 
width:70px; /* default 160 */ 
} 

/* pull input box left */ 
.form-horizontal .controls { 
margin-left: 90px; /* defaul 180 */ 
} 

/* shorten input box */ 
input, textarea, .uneditable-input { 
width: 180px; /* default 206 */ 
}

祝你好運！

來源

2013-01-18 00:30:59

使用響應式Twitter內容重疊水平表單的麻煩引導程序

回答

相關問題