Ändern der CSS-Formelemente mit dem Browser

Question

Ich bin neu in Bootstrap. Ich habe einige Formen mit CSS erstellt und möchte, dass es zusammen mit dem Browser angepasst wird. Ich habe die min.css aufgenommen.

In größerem Bildschirm, sieht es so aus, ich möchte das gleiche Layout

ich ein Quadrat und zwei Kreise geschaffen habe. Wenn ich die Größe verändere, stapele ich sie untereinander an. Ich hätte gerne das gleiche Layout, das ich auch in großen Geräten in mobilen Geräten sehe, aber ich kann es nicht verkleinern.

html:

<div id="mainpage" class="container"> 
      <div class="row"> 

       <div class="col-md-4 col-md-offset-2" id="sqr"> 
       </div> 
       <div class="col-md-3"> 
        <div class="row" id="circle1"></div> 
        <div class="row" id="circle2"></div> 
       </div> 

      </div> 

     </div> 
css: 

#sqr 
{ 
    height: 400px; 
    width:400px; 
    background-color: red; 
} 
#circle1 
{ 

    width:14em; 
    height:14em; 
    border-radius: 50%; 
    background-color: blue; 
} 
#circle2 
{ 
    width:14em; 
    height:14em; 
    border-radius: 50%; 
    background-color: green; 
} 

Answer 1

, wenn Sie die Kreise wollen Gebrauchbreite, um die Größe: 100%;

#sqr { 
    position: relative; 
    height: 400px; 
    width:100%; 
    max-width: 400px; 
    background-color: red; 
} 
#circle1 { 
    position: absolute; 
    top: 400px; 
    width:100%; 
    max-width: 400px; 
    height:100%; 
    max-height:400px; 
    border-radius: 50%; 
    background-color: blue; 
} 
#circle2 { 
    position: absolute; 
    top: 800px; 
    width:100%; 
    max-width: 400px; 
    height:100%; 
    max-height:400px; 
    border-radius: 50%; 
    background-color: green; 
} 

Answer 2

Versuchen Sie, feste Werte für Höhe und Breite zu entfernen. Sie werden immer so groß sein.

Überprüfen Sie stattdessen: max-Höhe: 400px und min-Höhe: 100px/min-Höhe: 25%;

max-breite: 400px; max-Breite: 400px;

#sqr{ 
    max-height: 400px; 
    max-width:400px; 
    background-color: red; 
} 

EDIT: Überprüfen Sie, ob Sie Bootstrap css/js richtig verknüpft habe.

<div class="border row"> 
<div class="border col-sm-6"> 
<div id="circle1"></div> 
</div> 
<div class="border col-sm-6"> 
<div id="circle2"></div> 
</div> 
</div> 

UND js Geige: jsfiddle.net/cxcgL5s1