min-width für Spalte in Bootstrap Grid-System

Question

Ich habe folgende HTML mit Bootstrap CSS.

<div class="row"> 
    <div class="col-sm-4" style="min-width: 66px;">Name</div> 
    <div class="col-sm-1" style="min-width: 120px;">Instance name</div> 
    <div class="col-sm-7" style="min-width: 87px;">Due date</div> 
</div> 

Ohne ‚min-width‘ eine Breite der zweiten Spalte in einigen Fällen weniger als 120 Pixel und ‚Instanzname‘ ist nicht vollständig sichtbar. So dass ich "min-width" und Breite der Zeile hinzugefügt hat, wird in diesen Fällen mehr als 100%. Die letzte Spalte wird in eine neue Zeile eingeschlossen.

Ich möchte Bootstrap dynamische Spaltenbreite haben und dieser Instanzname ist nicht verschwunden, wenn ich Browserfenstergröße reduzieren. Wie kann ich ein solches Verhalten erreichen?

Answer 1

Nicht sicher, ob es eine solche Art und Weise zu erreichen, was Sie wollen.

Die col-sm-x definiert bestimmte Breitenanteile Ihres Ansichtsfensters. Wenn Sie benutzerdefinierte Werte angeben, ist die kumulierte Breite aller Spalten entweder mehr oder weniger als 100%, was nicht das gewünschte Verhalten ist.

Stattdessen können Sie mehrere Klassen für dasselbe div bereitstellen. Beispiel:

<div class="row"> 
    <div class="col-sm-4 col-xs-1">Name</div> 
    <div class="col-sm-1 col-xs-3">Instance name</div> 
    <div class="col-sm-7 col-xs-2">Due date</div> 
</div> 

Wenn diese Lösung nicht ausreicht, dann werden Sie höchstwahrscheinlich mit einer Javascript-Lösung von einer Art kommen, die manuell die Breite des anderen divs setzt.

Es scheint eine andere, ähnliche Frage zu geben, die vorher auf Stackoverflow gepostet wurde. Schau mal here.

Bootstrap Grid on W3C

Answer 2

Haben Sie versucht, Ihre Werte für kleinere Auflösungen zu ändern? Zum Beispiel

<div class="col-lg-4 col-sm-4">Name</div> 
    <div class="col-lg-1 col-sm-2">Instance name</div> 
    <div class="col-lg-7 col-sm-6">Due date</div> 

Bootstrap Optionen für verschiedene Bildschirmgrößen hat, so dass Sie könnte sie überprüfen wollen out: http://getbootstrap.com/css/

Answer 3

Bootstrap-Säulen sind flex Elemente. Sie müssen sich für eine Spalte entscheiden, die verkleinert werden soll, wenn die anderen ihre Mindestbreite erreicht haben.

Für Ihr Beispiel wählte ich die letzte, "Fälligkeitsdatum", die normalerweise Spalte-sm-7 sein sollte. Ich reduziere es auf Col-SM-1, aber geben Sie Flex-Grow und wir müssen Bootstraps Max-Breite-Eigenschaft überschreiben.

<div class="row"> 
    <div class="col-sm-4" style="min-width: 66px;">Name</div> 
    <div class="col-sm-1" style="min-width: 120px;">Instance name</div> 
    <div class="col-sm-1" style="min-width: 87px; flex-grow: 1; max-width:100%; ">Due date</div> 
</div> 

hier ist ein ziemlich codepen i gemacht: https://codepen.io/timar/pen/VQWmQq/