statische Breite bei col-xl- * (Bootstrap 4)?

Wie kann ich bei Col-XL * verbieten, dass es für größere Monitore aufhört zu wachsen? Wenn ich es auf meinem Laptop (1280 Breite) und auf dem Desktop (1920) betrachte, gilt beides für col-xl, aber es ist entweder zu groß auf dem Desktop oder zu klein auf dem Laptop.statische Breite bei col-xl- * (Bootstrap 4)?

<div class="d-flex justify-content-center align-items-center text-center login-div "> 
    <div class="col-md-6 col-sm-8 col-lg-5 col-xl-3 col-10 rounded-10 mask"></div> 
</div>

Danke.

Quelle

2017-09-05 André

Wickeln Sie es in ein ['.container'] (http://getbootstrap.com/docs/4.0/layout/overview/) Element. Übrigens sollte sich ein Bootstrap '.col- *' immer in einem '.row' befinden, der wiederum immer in einem' .container' oder '.container-fluid' enthalten sein sollte. – Blazemonger

Eine Option ist media queries zu verwenden und eine max-width, wahrscheinlich für Bootstrap des xl breakpoint definieren:

@media (min-width: 1200px) { /* xl */ 
 

 
    .your-class { 
 
    background: yellow; 
 
    max-width: 200px; 
 
    } 
 
}

<div class="your-class">Hello</div>

Mit dem obigen Code-Elemente mit Klasse .your-class haben eine maximale Breite von 200px wenn die Breite des Darstellungsbereichs mindestens 1200 Pixel beträgt.

Quelle

2017-09-05 13:31:52 juzraai

funktioniert perfekt. Vielen Dank! –

Gern geschehen. :) – juzraai

statische Breite bei col-xl- * (Bootstrap 4)?

Antwort

Verwandte Themen