2016-06-21 4 views
-1

Die verschachtelten Raster-Thumbnails auf dieser Seite sind nicht korrekt verschachtelt. Die Seite muss in ein Tag eingeschlossen werden, um die Ergebnisse an wufoo zu senden. Wenn ich das Wrapping-Formular-Tag zu einem Div-Tag ändere, funktionieren die verschachtelten Gitter-Thumbnails korrekt. Irgendwelche Gedanken? http://thehomeshare.com/view2enter image description hereVerschachtelte Bootstrap-Grid-Unterbrechungen beim Umschließen mit einem Formular-Tag

Dies ist das gewünschte Layout

enter image description here

+1

Die Bootstrap Formularelemente haben bestimmte Raster/angewendet Layout-Stile, die für Dinge wie „.form-Gruppe“ ermöglichen Funktion identisch mit ".row" s. Dies könnte zu Problemen mit dem Auffüllen von verschachtelten Elementen führen, die dazu führen, dass Ihr Layout nicht in den Container passt. Sie müssten mehr Informationen für Ihre Fragen zur Verfügung stellen, um IMO besser beantwortet zu werden. – robertdavid

+0

Wenn Sie Ihren tatsächlichen HTML-Code in der Frage veröffentlichen, wird es für uns einfacher zu bewerten als ein externer Link. – user1934587390

Antwort

0

Offenbar funktioniert die Inline-Listen-Grid-Funktionalität nicht, wenn sie in ein Formular-Tag eingeschlossen wird.

entfernte ich den Behälter ul und änderte die li divs ist und es funktionierte wie ein Zauber

<ul class="inline-list"> 
    <li class="col-xs-6"...... 
0

ein paar widersprüchliche Probleme mit dem Raster-Layout Es gibt keine. Ich habe auch einige CSS-Klassen zu Ihrem Code hinzugefügt. Ich habe ein Rätsel, damit Sie sehen können, was ich getan habe, um die Probleme, die Sie haben, teilweise zu lösen.

Access the DEMO

Hier ist ein Teil von Ihnen Code, aber ich hinzugefügt im Grunde des CSS class = "img-responsive" zu Ihrem Haupt-Bild und die "col-xs-6" mit den Spalten:

<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
    <div class="panel-body"> 
     <div class="col-sm-6 col-xs-6"><!-- I'VE ADDED THE "col-xs-6" TO THE DIV --> 
      <img src="http://thehomeshare.com/assets/potrero1010/1200-4a9580217f67077603e917338f4d2ffd4e9e5951910f809f2e2fe97e0b4ba6bb.png" alt="" data-toggle="modal" data-target="#myModal" class="img-responsive"><!-- I'VE ADDED THE class="img-responsive" TO THE IMAGE --> 

Sie können die gleiche Technik auf die anderen Optionen replizieren. Ich hoffe, dass dies ein wenig Licht in die Grid-Konflikte bringt, die Sie haben.

Verwandte Themen