モバイルレスポンシブはすべてのモバイルで動作していません

Question

私はブートストラップの初心者ですが、テキストはすべてどこにありますか？ 私はいくつかのアプリケーションを作ろうとしていますが、それはすべてのモバイルデバイスiPhone 6+とnexus 6p どうすれば修正できますか？ DIVの代わりに、ブロック1、ブロック2 HTML

<div class="progress-bar position" data-percent="48" data-duration="1000" data-color="#63676e,#ec9850"><script>$(".progress-bar").loading();</script></div> 

<div id="Main"> 
<h2 class="text-color-header">Room Utilization</h2> 
     <h5 class="text-header">9 rooms occupied today</h5> 

     <div id="container"> 

     <div class="block block-1"> 
     <h1>$ 2,300</h1> 
     <h5>Today Revenue</h5> 
     </div> 
     <div class="block block-2"> 
     <h1>$ 12,100</h1> 
     <h5>Reservation for next 15 days</h5> 
     </div> 
     <div class="block block-3"> 
     <h1>$ 41,000</h1> 
     <h5>Revenue Todate/Month</h5> 
     </div> 
     <div class="block block-4"> 
     <h1>$ 53,100</h1> 
     <h5>Expected Revenue for this month</h5> 
     </div> 

     <!--Menu Part 02--> 
     <div id="base"> 
     <div class="base-block"> 
      <h4>Payments</h4> 
      <h1>$ 2,000</h1> 
      <h5>5 check-outs today</h5> 
     </div> 
     <div class="base-block"> 
      <h4>Down Payments</h4> 
      <h1>$ 300</h1> 
      <h5>2 Bokings withdown payments</h5> 
     </div> 

     </div> 
     <!-- End of menu Part--> 
    </div> 
</div> 

CSS

body{webkit-overflow-scrolling: touch;} 
.text-color-header { margin-top: 250px;} 
/* Progress Bar */ 

.progress-bar { 
    text-align: center; 
    height: 150px; 
    width: 150px; 
margin-left: 100px; 
} 

.progress-bar { 
    float: left; 
    width: 0; 
    height: 100%; 
    font-size: 12px; 
    line-height: 20px; 
    color: #fff; 
    text-align: center; 

    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); 
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); 
    -webkit-transition: width .6s ease; 
    -o-transition: width .6s ease; 
    transition: width .6s ease; 
} 
.progress-bar div { 
    position: absolute; 
    height: 200px; 
    width: 200px; 
    border-radius: 50%; 
} 
.progress-bar div span { 
    position: absolute; 
    font-family: Arial; 
    font-size: 35px; 
    line-height: 175px; 
    height: 175px; 
    width: 175px; 
    left: 12.5px; 
    top: 12.5px; 
    text-align:center; 
    border-radius: 50%; 
    background-color:#e0e0e0; 
    color: black; 

} 
.progress-bar .background { 
    background-color: #b3cef6; 
} 
.progress-bar .rotate { 
    clip: rect(0 100px 200px 0); 
    background-color: #4b86db; 
} 
.progress-bar .left { 
    clip: rect(0 100px 200px 0); 
    opacity: 1; 
    background-color: #b3cef6; 
} 
.progress-bar .right { 
    clip: rect(0 100px 200px 0); 
    transform: rotate(180deg); 
    opacity: 0; 
    background-color: #4b86db; 
} 
@keyframes toggle { 
    0% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 1; 
    } 
} 
/*End of Progress Bar*/ 

.page { 
    margin: 0px auto; 
    display: flex; 
} 
.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
} 
.clearfix { 
    *zoom: 1; 
} 
.clearfix { 
    display: inline-block; 
    margin: 0px auto; 
} 
h5, 
.h5 { 
    font-size: 13px; 
    text-align: center; 
} 
.block { 
    width: 200px; 
    height: 100px; 
    margin: 1px; 
    display: inline-block; 
    background: ; 
    color: #d4c4b6; 
} 
.block:hover h1 { 
    color: #000000; 
} 
.block:hover h5 { 
    color: #A48973; 
} 
#base { 
    background: #e2e2e2; 
    display: inline-block; 
    height: 120px; 
    margin-left: 0px; 
    margin-top: -7px; 
    position: relative; 
    width: auto; 

} 
#base:before { 
    border-bottom: 35px solid #e2e2e2; 
    border-left: 30px solid transparent; 
    border-right: 30px solid transparent; 
    content: ""; 
    height: 0; 
    left: 173px; 
    position: absolute; 
    top: -20px; 
    width: 0; 
} 
h1, 
.h1 { 
    font-size: 27px; 
    text-align: center; 
} 
h2, 
.h2 { 
    font-size: 20px; 
    text-align: center; 
} 
h4, 
.h4 { 
    font-size: 16px; 
    text-align: center; 
} 
.base-block { 
    display: inline-block; 
    height: 120px; 
    width: 200px; 
    margin: 1px; 
    display: inline-block; 
} 
.base-block h1, 
h4 { 
    color: #000000; 
} 
.base-block h5 { 
    color: #A48973; 
} 
.navbar-default .navbar-brand { 
    color: #A48973; 
} 
.navbar-default .navbar-toggle { 
    border: none; 
} 
.navbar-default .navbar-toggle .icon-bar { 
    background-color: #A48973; 
} 
.search-bar { 
    padding: 7px 15px; 
} 
/*Start Media query*/ 

@media (max-width: 768px) { 
    .form-control { 
     padding: 6px 100px; 
    } 
} 
/*End Of Media query*/ 

Answer 1

使用ブートストラップグリッドレイアウトクラスCOL-XS-6。あなたのCSSでは、pxの数値ではなく、幅と高さをパーセントで設定します。 また、高さを設定しないで、幅を設定してください。 各divにpanelやpanel-bodyなどのクラスを使用します。 私はアミットの答えを有する化合物ますので、私はコメントを追加することができませんでした

<div class="container-fluid"> 
//Create three rows 
<div class="row"> 
//create 2 divs with class col-xs-6 
</div> 
<div class="row"> 
//create 2 divs with class col-xs-6 
</div> 
<div class="row"> 
//create 2 divs with class col-xs-6 
</div> 
</div> 

Answer 2

でコンテンツ全体を置きます。この <meta name="viewport" content="width=device-width, initial-scale=1" />があなたのヘッドタグにも含まれていることを確認してください。ページビューポートサイズをデバイスのpxサイズに設定します。それがなければ、Amitのコードはうまくいきません。あなたのコードで実際にブートストラップを使用しているわけではありません。ブートストラップの真実を理解するためにこれを調べることをお勧めします