无法使此响应式设计适用于此布局

Question

我正在尝试使用Bootstrap响应式设计来实现以下移动布局，但无法实现它。

以下是我的代码。

<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

使用以下代码检查，该代码完全基于引导程序和完全响应

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

试试这个其他效果应用你的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>