Bootstrap响应网格无法正常工作

Question

我正在尝试设置移动布局，我试图放置一个宽度为75％的文本框;和20％的搜索按钮;

但它不起作用

我在div中的右边和左边有额外的空间

.green {

  background: green;

  height: 300px;

}

.yellow {

  background: #ffcc00;

  height: 300px;

}

.left {

  background: #147cc4;
  width: 70%;
  float: left;

}

.right {

  float: right;
  width: 20%;
 
}

<div class="col-md-12 col-xs-12">

  <div class="col-md-4  green">

    <div class="left">
      hello world !
    </div>
    <div class="right">
      waka!
    </div>


  </div>

</div>

Answer 1

<强>解决方案

您必须使用不同屏幕尺寸的媒体查询。我使用的最大宽度为400px ..但我建议你必须使用bootstrap。 的 CSS

    .green{
        background:green;
        height:300px;
    }

    .yellow{
        background:#ffcc00;
        height:300px;
    }

    .left{
        background:#147cc4;
        width:70%;
        font-size:30px;
        color:#fff;
        //left:0;
        float:left;
    }
    .right{
        float:right;
        width:20%;
        background:#fff;
        color:fff;
        font-size:30px;
    }
    @media only screen and (max-width: 400px) 
    {
    .left
    {
        width:70%;
        font-size:15px;
        float:left;
    }
    .right{
        float:right;
        width:20%;
        font-size:15px;
    }
  }