Dieses Responsive Design kann nicht für dieses Layout verwendet werden

Question

Ich versuche Bootstrap Responsive Design für dieses folgende mobile Layout zu verwenden, konnte es aber nicht implementieren.

Das folgende ist mein Code.

<nav class="navbar " role="navigation"> 
    <div> 
     <ul class="nav navbar-nav"> 
     <p style="color: white">Dashboard</p> 
     </ul> 
    </div> 
    </nav> 
    </nav> 
    <div class="container"> 
    <div class="text-center"> 
      <div>$25</div> 
      <div> 
      <div>CASH</div> 
      <div>BACK</div> 
      </div> 
      <div> 
      Your Rewards 
      </div> 
    </div> 
    </div> 
    <div class="container"> 
    <div class="text-center"> 
     <P>3 Days Lefr</P> 
    </div> 
    </div> 
    <div class="container"> 
    <div class="text-center"> 
     <p>Your Progress</p> 
     <p>To earn Rewards for this month you need:</p> 
    </div> 
    </div> 

Answer 1

prüfen mit folgendem Code, der auf Bootstrap vollständig basiert und voll ansprechbar

body{ 
 
    background : #02003D !important; 
 
} 
 
.content{ 
 
    text-align : center; 
 
    color : white; 
 
} 
 
.chrs{ 
 
    font-size : 50px; 
 
    color : #7FD6FF; 
 
    font-weight : bold; 
 
    float : right; 
 
    width: 1.5em; 
 
    vertical-align: text-top; 
 
    margin-top : -12px; 
 
    
 
} 
 
span.cashBack { 
 
    color : #7FD6FF; 
 
    width: 2em; 
 
    float : left; 
 
    white-space: pre-line; 
 
    line-height: 20px; 
 
    font-weight: bold; 
 
    vertical-align: text-top; 
 
    font-size : 25px; 
 
} 
 
.rewards{ 
 
    color : #7FD6FF; 
 
    vertical-align: text-top; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    font-size : 25px; 
 
} 
 

 
.daysLeft{ 
 
\t padding : 5px; 
 
    background-color : #343663; 
 
    color : white; 
 
    text-align : center; 
 
    font-size : 15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="content"> 
 
    <h4 style="color: white">Dashboard</h4> 
 
    <div class="row"> 
 
     <div class="col-xs-6"><span class="chrs">$25</span></div> 
 
     <div class="col-xs-6"><span class="cashBack">CASH BACK</span></div> 
 
     <div class="col-xs-12"><span class="rewards">Your Rewards</span></div> 
 
    </div> 
 
    
 
    </div> 
 
</div> 
 
<div class="daysLeft">3 Days Left</div> 
 
<div class="container"> 
 
    <div class="content"> 
 
    <h3>Your Progress</h3> 
 
    <p>To earn Rewards for this month you need:</p> 
 
    </div> 
 
</div>

Answer 2

versuchen, dies andere Effekte anwenden, um Ihre CSS,

<div class="container padding3px" > 
     <div class="text-center"> 
      <div>Dashboard</div> 
      <div>$25</div> 
      <div> 
       <div>CASH</div> 
       <div>BACK</div> 
      </div> 
      <div> 
       Your Rewards 
      </div> 
     </div> 
    </div> 
<div class="container"> 
    <div class="text-center"> 
     <p>3 Days Left</p> 
    </div> 
</div> 
<div class="container"> 
    <div class="text-center"> 
     <p>Your Progress</p> 
     <p>To earn Rewards for this month you need:</p> 
    </div> 
</div>