Formularfelder Überlauf Bootstrap Formular

Ich spiele mit Bootstrap Grid Framework in meiner einfachen Form. Aus irgendeinem Grund scheinen die Formularfelder die Formularrahmenbox zu überfüllen. Siehe Bild unten.Formularfelder Überlauf Bootstrap Formular

Dies ist nicht sinnvoll, da alle meine Formularfeldelemente innerhalb des Formulars sind. Mein HTML ist hier. Ich habe sichergestellt, Bootstrap CSS und Bootstrap js zu importieren.

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 

      <form class="col-md-8 form"> 
       <h4 class="form-heading">A form</h4> 

       <div class="form-group"> 
        <div class = "col-md-6"> 
         <input type="text" name="input1" class="form-control"/> 
        </div> 

        <div class = "col-md-6"> 
         <input type="text" name="input2" class="form-control"/> 
        </div> 

        <div class = "col-md-12"> 
         <textarea name="terms" rows="8" class="form-control"></textarea> 
        </div> 

        <div class="col-md-12 text-center"> 
         <button type="submit" class="btn btn-lg btn-primary">Submit</button> 
        </div> 
       </div> 
      </form> 
     </div> 
    </div> 
</div>

Mein CSS ist hier.

.form { 
    max-width: 100%; 
    border: solid black; 
    padding-top: 20px; 
    margin-top: 30px; 
    float: none; 
} 

.form .form-heading { 
    text-align: center; 
} 

.form .form-control { 
    position: relative; 
} 

input { 
    max-width: 100%; 
    max-height: 100%; 
}

Bitte teilen Sie alle Ideen auf eine Lösung.

Quelle

2016-08-02 OneMoreQuestion

Dies wird durch die Spalten float verursacht, die wie durch die Verwendung row s typischerweise behoben ist weit Bootstrap geht. Sie verschachteln Spalten, während Sie nur einen einzigen row für alle diese Ebenen von Spalten verwenden, die Sie haben. Ich würde entweder zusätzliche Zeilen verwenden oder den Float selbst mit CSS löschen. Und Sie brauchen wahrscheinlich die äußerste Spalte nicht.

Und das ergibt auch nicht viel Sinn: <form class="col-md-8 form">. Die Klassenbreite der Klasse ist 100%. Sie verwenden jedoch standardmäßig eine Spalte, die auf die Breite 66.666666667% festgelegt ist. Und form-control hat auch eine Standardbreite von 100%.

Documentation

Arbeitsbeispiel:

.form { 
 
    border: solid black; 
 
    margin: 20px 0; 
 
    padding: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-8 col-md-offset-2"> 
 
     <form class="form"> 
 

 
     <h4 class="form-heading text-center">A Form</h4> 
 

 
     <div class="row"> 
 
      <div class="col-md-6"> 
 
      <div class="form-group"> 
 
       <input type="text" name="input1" class="form-control" /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-md-6"> 
 
      <div class="form-group"> 
 
       <input type="text" name="input2" class="form-control" /> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="row"> 
 
      <div class="col-md-12"> 
 
      <div class="form-group"> 
 
       <textarea name="terms" rows="8" class="form-control"></textarea> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="row"> 
 
      <div class="col-md-12 text-center"> 
 
      <div class="form-group"> 
 
       <button type="submit" class="btn btn-lg btn-primary">Submit</button> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2016-08-02 22:27:12 vanburen

Ehrfürchtig danke, das ist großartig – OneMoreQuestion

Versuchen Hinzufügen Höhe: 1000px Klasse zu bilden

<!DOCTYPE html> 
<html> 

<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <style> 
    .form { 
    max-width: 100%; 
    border: solid black; 
    padding-top: 20px; 
    margin-top: 30px; 
    height: 1000px; 
    float: none; 
} 

.form .form-heading { 
    text-align: center; 
} 

.form .form-control { 
    position: relative; 
} 

input { 
    max-width: 100%; 
    max-height: 100%; 
} 
    </style> 
    <title>Something</title> 
</head> 
<body> 


<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 

      <form class="col-md-8 form"> 
       <h4 class="form-heading">A form</h4> 

       <div class="form-group"> 
        <div class = "col-md-6"> 
         <input type="text" name="input1" class="form-control"/> 
        </div> 

        <div class = "col-md-6"> 
         <input type="text" name="input2" class="form-control"/> 
        </div> 

        <div class = "col-md-12"> 
         <textarea name="terms" rows="8" class="form-control"></textarea> 
        </div> 

        <div class="col-md-12 text-center"> 
         <button type="submit" class="btn btn-lg btn-primary">Submit</button> 
        </div> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 


</body> 

<script> 


</script> 
</html>

Quelle

2016-08-02 22:04:56

col-md nur mit mittleren Größen im Bildschirm arbeitet so, wenn Sie Ihre nav der Größe Bildschirm wird alles in Ordnung ist zu sehen, aber wenn Sie wollen, dass die halten gleiches Aussehen auf alle Bildschirm haben Sie nur col-lg-

Beispiel verwenden: '

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-12"> 

      <form class="col-lg-8 form"> 
       <h4 class="form-heading">A form</h4> 

       <div class="form-group"> 
        <div class = "col-lg-6"> 
         <input type="text" name="input1" class="form-control"/> 
        </div> 

        <div class = "col-lg-6"> 
         <input type="text" name="input2" class="form-control"/> 
        </div> 

        <div class = "col-lg-12"> 
         <textarea name="terms" rows="8" class="form-control"></textarea> 
        </div> 

        <div class="col-lg-12 text-center"> 
         <button type="submit" class="btn btn-lg btn-primary">Submit</button> 
        </div> 
       </div> 
      </form> 
     </div> 
    </div> 
</div>

https://jsfiddle.net/8n8wdsvj/

Quelle

2016-08-02 22:06:21

Das hat es nicht lösen für mich – OneMoreQuestion

Formularfelder Überlauf Bootstrap Formular

Antwort

Verwandte Themen