Wrap divs in Bootstrap-Spalte

-1

Ich habe einen Container mit wenigen <div> s (Border Circle) und ich möchte sie wickeln, wenn die Auflösung niedriger wird. Der Behälter hat class="col-md-8". Es verhält sich gut, aber auf kleinere Auflösungen ganze container über den Hintergrund hinaus. Stattdessen sollte es alle <div> wickeln und unter die anderen stellen. Hier ist ein ähnliches Ergebnis, wie ich sie achive wollen: Wrap divs in Bootstrap-Spalte

#ct-skills{ 
 
    background: grey; 
 
    height: 460px; 
 
    width: 100%; 
 
    text-align: center; 
 
    border: 3px solid green; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-direction: column; 
 
    } 
 

 
    h3{ 
 
    font-size: 24px; 
 
    font-family: "Raleway"; 
 
    color: rgb(255, 255, 255); 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    border: 2px solid blue; 
 
    } 
 

 
    #skills-circles{ 
 
    display: flex; 
 
    border: 1px solid yellow; 
 
    float: none; 
 
    margin: 0 auto; 
 
    } 
 

 
    .ct-circle{ 
 
    width: 100%; 
 
    height:100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
    } 
 

 
    .circle{ 
 
     height: 150px; 
 
     width: 150px; 
 
     border: 5px solid black; 
 
     border-radius: 50%; 
 
     font-size: 16px; 
 
     font-family: "Raleway"; 
 
     color: rgb(255, 255, 255); 
 
     display: flex; 
 
     align-items: center; 
 
     justify-content: center; 
 
     } 
 
     
 
     span{ 
 
     font-size: 16px; 
 
     font-family: "Raleway"; 
 
     color: rgb(255, 255, 255); 
 
     }

<div class="container" id="ct-skills"> 
 
    <h3>Our skills</h3> 
 
    <div class="col-md-8" id="skills-circles"> 
 
    <div class="ct-circle"> 
 
     <div class="circle"> 
 
     <span>10%</span> 
 
     </div> 
 
     <span>Marketing</span> 
 
    </div> 
 
    <div class="ct-circle"> 
 
     <div class="circle"> 
 
     <span>10%</span> 
 
     </div> 
 
     <span>Research</span> 
 
    </div> 
 
    <div class="ct-circle"> 
 
     <div class="circle"> 
 
     <span>10%</span> 
 
     </div> 
 
     <span>Management</span> 
 
    </div> 
 
    <div class="ct-circle"> 
 
     <div class="circle"> 
 
     <span>10%</span> 
 
     </div> 
 
     <span>Consultancy</span> 
 
    </div> 
 
    <div class="ct-circle"> 
 
     <div class="circle"> 
 
     <span>10%</span> 
 
     </div> 
 
     <span>Promotion</span> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-01-25 Felnyr

Die Bootstrap-Spalten erfordern innen 'row' Elemente platziert werden um richtig zu funktionieren. – CBroe

Ich habe diese Lösung früher versucht und es hat nicht für mich funktioniert. Vielleicht, weil ich Flex-Eigenschaften anwendete und den Bootstrap-Originalcode überschrieb. und deshalb funktioniert es nicht – Felnyr

Sie können nicht erwarten, dass die Dinge immer noch wie gewünscht funktionieren, wenn Sie wesentliche Änderungen an der Funktionsweise des Bootstrap-Layout-Mechanismus vornehmen. Bootstrap v4 hat Flexbox-Unterstützung, aber wenn Sie nur v3 verwenden können, würde ich empfehlen, dass Sie diesen (den bestimmten Teil der Site) vollständig selbst formatieren und keine der Bootstrap-Layout-Klassen verwenden. – CBroe

Versuchen Sie, diese

CSS

#ct-skills{ 
    background: grey; 
    width: 100%; 
    text-align: center; 
    border: 3px solid green; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
    } 

    h3{ 
    font-size: 24px; 
    font-family: "Raleway"; 
    color: rgb(255, 255, 255); 
    font-weight: bold; 
    text-transform: uppercase; 
    border: 2px solid blue; 
    } 

    #skills-circles{ 
    display: flex; 
    border: 1px solid yellow; 
    float: none; 
    margin: 0 auto; 
    flex-wrap: wrap; 
    padding: 20px; 
    } 

    .ct-circle{ 
    min-height: 150px; 
    min-width: 150px; 
    display: flex; 
    flex-direction: column; 
    align-items: stretch; 
    justify-content: center; 
    margin: 20px; 
    } 

    .circle{ 
     min-height: 100%; 
     min-width: 100%; 
     box-sizing: border-box; 
     border: 5px solid black; 
     border-radius: 50%; 
     font-size: 16px; 
     font-family: "Raleway"; 
     color: rgb(255, 255, 255); 
     display: flex; 
     align-items: center; 
     justify-content: center; 
     } 

     span{ 
     font-size: 16px; 
     font-family: "Raleway"; 
     color: rgb(255, 255, 255); 
     }

Demo - https://jsfiddle.net/zeo5amvn/

Quelle

2017-01-25 14:35:34 grinmax

Das ist es! Gut gemacht! Kannst du erklären, was die Hauptfrage war? Ich sehe, du hast eine minimale Breite hinzugefügt und -high. – Felnyr

Dies ist Flexbox-Funktion – grinmax

Wenn ich wirklich verstehen, was Sie möchten, können Sie dies nur tun, durch eine kleine Änderung:

#skills-circles { 
display: flex; 
border: 1px solid yellow; 
float: none; 
margin: 0 auto; 
flex-wrap: wrap;

}

Und entfernen width:100%; aus .ct-Kreis

Dies ist das Bild:

Quelle

2017-01-25 13:08:17

Flex-Unterstützung - http://caniuse.com/#search=flex –

Ich möchte # Skills-Kreise inline anzeigen. Nach dem Hinzufügen von Flex Wrap wird es wie eine Spalte angezeigt, was nicht der Effekt ist, den ich erreichen möchte. Width-Eigenschaft ist da, weil ich ein Hintergrundbild habe, das ich den ganzen Breitenraum bedecken möchte. – Felnyr

Wrap divs in Bootstrap-Spalte

Antwort

Verwandte Themen