Html 引导响应网格不工作

我试图设置移动布局，我试图放置一个宽度为75%的文本框；和20%的搜索按钮

但它不起作用

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

.green{
背景：绿色；
高度：300px；
}
黄先生{
背景：#ffcc00；
高度：300px；
}
.左{
背景：#147cc4；
宽度：70%；
浮动：左；
}
.对{
浮动：对；
宽度：20%；
}

你好，世界！
瓦卡！

解决方案

您必须在不同的屏幕大小下使用媒体查询。我使用的最大宽度为400px。。但我建议您必须使用引导程序来实现这一点。 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;
    }
  }

---

你在当前结果中需要做什么更改当你可以使用网格时，你为什么要使用一些任意的

left

和

right

类，这就是它的用途…我在右侧和左侧有一个额外的空间，我正在附加一个屏幕截图请检查！回到bootstrap文档并了解更多信息，如果您花更多的时间阅读，您可以正确地完成这项工作。你不知道如何正确使用cols。实际上你需要什么？我听不懂你的问题，，