嘿，我来帮你分析这个问题，你遇到的.row1背景色不显示的情况，其实是浮动元素导致的父容器高度塌陷问题，咱们一步步来解决：

问题根源 #

你用了Bootstrap的col-xs-8、col-md-4这类列组件，它们默认是float: left的浮动元素。当父容器（也就是你的.row1）里面只有浮动元素时，父容器的高度会被“塌陷”为0——简单说就是浏览器识别不到浮动元素的高度，所以背景色自然就看不到了。

而Bootstrap自带的.row类已经帮你处理了这个坑：它通过:before和:after伪元素实现了清除浮动的逻辑，所以换成.row时，父容器能正常识别内部元素的高度，背景色就显示出来了。

具体解决方法 #

你有几个简单的修复选项，选哪个都可以：

方法1：给.row1添加清除浮动的样式 #

直接在你的CSS里给.row1补上清除浮动的代码，完全模仿Bootstrap.row的实现逻辑：

.row1 {
  background: yellowgreen;
  /* 可选：加上和Bootstrap.row一致的左右边距，让布局更协调 */
  margin-right: -15px;
  margin-left: -15px;
}
/* 清除浮动的核心代码 */
.row1:before,
.row1:after {
  content: " ";
  display: table;
}
.row1:after {
  clear: both;
}

这样.row1就能像原生.row一样正常包裹浮动的列元素，背景色自然就显示了。

方法2：用Bootstrap现成的.clearfix类 #

不想改CSS的话，直接给.row1元素加上Bootstrap自带的clearfix类就行，它的作用就是清除浮动：

<div class="row1 clearfix">
  <form class="form">
    <div class="col-xs-8 col-md-4">
      <input type="text" id="TextBox1" placeholder="Enter your query">
    </div>
    <div class="col-xs-4 col-md-2">
      <button type="submit" class="button">post</button>
    </div>
  </form>
</div>

方法3：复用Bootstrap的.row，再加自定义类 #

如果你觉得单独搞个row1没必要，也可以直接用.row，然后给它加个自定义类来设置背景色——这样既利用了Bootstrap的布局逻辑，又不会影响其他.row元素：

<div class="row custom-bg-row">
  <!-- 内部的form和列元素 -->
</div>

然后CSS里写：

.custom-bg-row {
  background: yellowgreen;
}

额外小提醒 #

你代码里还有个小语法错误：border-left : 2pxsolid #000这里的2pxsolid中间少了空格，应该写成2px solid #000，不然这个边框样式是不会生效的哦～

内容的提问来源于stack exchange，提问作者Kalyan Sundar