Probleme mit dem Inhalt überlappende horizontale Form mit reaktionsschnellen Twitter Bootstrap

Question

Ich habe mehr Zeit verbracht, als ich jemals zugeben, versuchen, diesen dummen Fehler zu beheben. Ich habe ein Formular, das links von einem Inhalt angezeigt wird. Es sieht auf einem breiten und schmalen Bildschirm gut aus, aber bei einer Tablettbreite (es liegt zwischen 770 und 950 oder so) überlappt der Inhalt auf der rechten Seite die Formularfelder.

Fehle ich etwas in meinem Markup, um Twitter Bootstrap richtig zu verwenden oder muss ich einige benutzerdefinierte Stile mit Breakpoints hinzufügen, um es zu beheben? Es scheint, dass die festgelegte Pixelbreite das in bootstrap.css definierte Problem verursacht. Sollten diese Breiteneigenschaften% nicht verwenden, da ich ein flüssiges responsives Layout verwende?

<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> 

den beigefügten Screenshot für den Bug ansehen oder Sie können es reproduzieren sich meine fiddle verwenden.

Wenn jemand helfen könnte, einen Weg aufzuzeigen, um dies zu beheben, wäre ich sehr dankbar!

Answer 1

Fügen Sie Ihren Eingabeelementen einfach eine Breite hinzu, damit sie sich an alle Bildschirmgrößen anpassen können. Sie können so etwas wie .span12 als Breite auf Eingabeelemente verwenden, und das sollte das Problem beheben:

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> 

Demo: http://jsfiddle.net/yR7Ap/18/

Answer 2

Ihr Formular ist zu breit für die .span5-Spalte. Versuchen Sie, diese über Zugabe:

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

und fügen Sie die folgende Art:

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

und Sie werden sehen, was ich meine.

Answer 3

Die anderen Beiträge, die Ursache für geortet haben Das Problem, dass Ihr Formular zu breit ist für das Span5 div mit dem Standard-Bootstrap css

Es ist nicht zu schwierig, um es fit zu machen. Prüfen Sie, ob das hilft: http://jsfiddle.net/panchroma/FXXaZ/

Ich habe Ihre Form mit diesem CSS verschärft:

/* 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 */ 
} 

Viel Glück!