引导响应网格不起作用答案

【问题标题】：Bootstrap responsive grid are not working引导响应网格不起作用
【发布时间】：2016-06-13 20:27:49
【问题描述】：

我正在尝试设置移动布局，我试图在其中放置一个宽度为 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>

【问题讨论】：

您需要对当前结果进行哪些更改
既然可以使用网格，为什么还要使用一些任意的left 和right 类，这就是它的用途......
我的左右两边有多余的空间，我附上截图请检查！
返回引导文档并了解更多信息，如果您花更多时间阅读，您可以正确执行此操作。你不明白如何正确使用 cols。
其实你需要什么，？无法理解您的问题，

标签： html css twitter-bootstrap

【解决方案1】：

解决方案

您必须在不同的屏幕尺寸下使用媒体查询。我在 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;
    }
  }

【讨论】：