webentwicklung-frage-antwort-db.com.de

Bootstrap 4 Horizontal Form kann nicht wie gewünscht ausgeführt werden

Wie erstelle ich eine einfache Bootstrap Horizontal Form , die auf Telefon, Tablet und Computer richtig aussieht? Ich möchte nämlich, dass die Combos wie im Beispiel dargestellt werden, aber ich möchte nicht, dass die Combos größer als nötig sind, und ich möchte nur eine kleine Lücke zwischen Label und Combo. Wenn die Bildschirmgröße zu klein ist, um in Label und Combo zu passen, möchte ich, dass sie gestapelt werden.

Insbesondere das Boostrap-Beispiel verbraucht die gesamte Breite von 100%. Ich möchte das nicht. Ich möchte nicht, dass die Combo breiter ist als nötig, und ich möchte keine große Lücke zwischen Label und Combo. 

Ich habe versucht, col-auto hinzuzufügen, aber dann waren die Combos nicht mehr horizontal ausgerichtet.

Ich habe nun versucht, Colour- [1-12] -Werte für Label und Combo hinzuzufügen, wie in https://getbootstrap.com/docs/4.1/components/forms/#column-sizing beschrieben, aber dann wurde der Stack nicht korrekt gestapelt Wann geht ein kleines Telefon.

Ich habe dann mit col-md versucht, also weniger als 12, aber auf dem Hauptbildschirm sieht es nicht richtig aus, da jetzt sowohl Label als auch Combo den gleichen Platz einnehmen, sodass sie jeweils die Hälfte des Bildschirms haben und sich nicht in der Nähe befinden.

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div>
    	<div class="form-row">
    	    <label for="discogsGenreOverwriteOption" id="discogsGenreOverwriteOptionlabel" class="col-form-label col-xs-12 col-sm-6 col-md-5">
    	        Genre
    	    </label>
    	    <div class="col-xs-12 col-sm-3 col-md-2">
    	        <select aria-describedby="discogsGenreOverwriteOptionhelp" class="custom-select" name="discogsGenreOverwriteOption" id="discogsGenreOverwriteOption">
    	            
    	                <option value="0">
    	                    Always replace values
    	                </option>
    	                <option value="1">
    	                    Always add values
    	                </option>
    	                <option value="2">
    	                    Replace if empty
    	                </option>
    	                <option selected="selected" value="3">
    	                    Never Replace
    	                </option>
    	            
    	        </select>
    	    </div>
    	</div>
    	<div class="form-row">
    	    <label for="discogsGenreFromOption" id="discogsGenreFromOptionlabel" class="col-form-label col-xs-12 col-sm-6 col-md-5">
    	        From
    	    </label>
    	    <div class="col-xs-12 col-sm-3 col-md-2">
    	        <select aria-describedby="discogsGenreFromOptionhelp" class="custom-select" name="discogsGenreFromOption" id="discogsGenreFromOption">
    	            
    	                <option value="0">
    	                    Discogs Style
    	                </option>
    	                <option value="1">
    	                    Discogs Genre
    	                </option>
    	                <option value="2">
    	                    Discogs Style and Genre
    	                </option>
    	            
    	        </select>
    	    </div>
    	</div>
    </div>

13
Paul Taylor

Das Problem ist, dass Flexbox nicht in Zeilen/Spalten wie in einer Tabelle funktioniert. Sie können col-sm-auto verwenden, damit jedes Etikett verkleinert wird, aber dann werden die Beschriftungen/Eingaben nicht vertikal auf der Seite ausgerichtet.

 enter image description here

Es klingt wie Sie wollen Verkleinern der Beschriftungsspalte, um sie an die Breite des breitesten Labels anzupassen. Dies kann geschehen, indem alle Beschriftungen in einer Spalte und die Eingaben in einer anderen Spalte platziert werden. Auf mobilen Bildschirmen werden jedoch nicht alle Beschriftungen/Eingaben aufeinander gestapelt.

Es gibt keine elegante Bootstrap-Lösung für dieses Problem. Sie können Tabellen, CSS-Raster oder die von @Toan Lu in den Kommentaren beschriebene Option verwenden.

Bootstrap-Grid-Option

Ich würde empfehlen, einfach col-sm-2 oder col-sm-3 für die Etiketten zu verwenden (sie an ungefähr das breiteste Etikett anzupassen) und text-truncate für Ellipsis (...) den überfließenden Text zu verwenden, bis sie auf dem mobilen Gerät vertikal gestapelt werden.

 enter image description here

<div class="form-row">
        <label class="col-form-label col-sm-2 text-truncate">
            Label
        </label>
        <div class="col-sm-3 col-md-2">
             <select>..</select>
        </div>
</div>

https://www.codeply.com/go/e3mDrmMv7k


Tabellenoption

Mit dieser Option wird der width:1% auf den Etiketten verwendet, so dass sie auf die Breite der Breite schrumpfen. Verwenden Sie text-nowrap, um zu verhindern, dass die Etiketten verpackt werden. Jede Formularzeile ist ein d-table-row und jedes Label ist ein d-table-cell...

.col-form-label.d-sm-table-cell {
   width: 1%;
}
<div class="container py-3">
    <div class="form-row d-table-row">
        <label class="col-form-label col-sm-2 d-sm-table-cell text-nowrap">
            Genre
        </label>
        <div class="col-sm-3 col-md-2">
            <select>
             ..
            </select>
        </div>
    </div>
    <div class="form-row d-table-row">
        <label class="col-form-label col-sm-2 d-sm-table-cell text-nowrap">
            Longer label here
        </label>
        <div class="col-sm-3 col-md-2">
            <select>
                ..
            </select>
        </div>
    </div>
</div>

https://www.codeply.com/go/e3mDrmMv7k (siehe zweite Option)

Die Tabellenoption macht die divs zu tr/td, funktioniert aber auch darauf, dass die Felder auf dem mobilen Gerät vertikal gestapelt werden können. Weitere Informationen zu [D-Table-Klassen] (Ja, Teil von Bootstrap 4: http://getbootstrap.com/docs/4.1/utilities/display/#notation ).


CSS-Rasteroption

Eine andere Methode (nicht Bootstrap 4) verwendet das CSS-Raster. Machen Sie die Zeile display:grid Verwenden Sie die fr-Dimensionierung für den 2 grid-template-columns in der Zeile.

.d-grid {
  display: grid;
  grid-template-columns: 0fr 1fr;
}

https://www.codeply.com/go/9Z7Hg2tl1H

9
Zim

Funktioniert wie erwartet, wenn Sie eine frühere Version von Bootstrap css verwenden:

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
0
Keja1809