ブラウザでCSSシェイプ要素のサイズを変更する

Question

ブートストラップを初めて使用しました。私はCSSを使っていくつかの図形を作成し、それをブラウザと一緒にサイズを変更したいと思っています。私はmin.cssを含んでいます。大きな画面で

が、それはこのようになります、私は、正方形と二つの円を作成した同じレイアウト

をしたいです。私はサイズを変更すると、私はそれを上下に積み重ねる。私はモバイルの大型デバイスでも同じレイアウトをしたいと思っていますが、それを縮小することはできません。

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

あなたは円が使用幅のサイズを変更したい場合：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

高さと幅の固定値を削除してみます。彼らはいつもこの大きなものになるでしょう。

max-height：400pxとmin-height：100px/min-height：25％を確認してください。

最大幅：400px; 最大幅：400ピクセル。

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

EDIT：あなたは、ブートストラップCSS/JSを得た場合 チェックが正しくリンク。

<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> 

とJSフィドル： jsfiddle.net/cxcgL5s1