Html 引导4个网格列重叠

h1标记与表单重叠， 有人有解决这个问题的办法吗？ 我只使用了12列，但它们仍然重叠

.SearchStyle2{
填充顶部：10px；
右边填充：10px；
垫底：10px；
左侧填充：10px；
}
.头式{
填充顶部：10px；
右侧填充：5px；
垫底：10px；
左侧填充：0px；
位置：绝对位置；
右：0px；
宽度：500px；
填充：10px；
}
.头型{
垫面：5px；
右边填充：10px；
垫底：10px；
左侧填充：50px；
宽度：100%；
}
.头饰款式{
右侧填充：15px；
}
.搜索风格{
位置：绝对位置；
右：450px；
宽度：350px；
}

伟大的书店！
搜寻

删除

.search样式，设置col-md-4而不是col-xs-4，似乎效果更好一些


.SearchStyle2{
填充顶部：10px；
右边填充：10px；
垫底：10px；
左侧填充：10px；
}
.头式{
填充顶部：10px；
右侧填充：5px；
垫底：10px；
左侧填充：0px；
位置：绝对位置；
右：0px；
宽度：500px；
填充：10px；
}
.头型{
垫面：5px；
右边填充：10px；
垫底：10px；
左侧填充：50px；
宽度：100%；
}
.头饰款式{
右侧填充：15px；
}

伟大的书店！
搜寻
标题跨越整个页面的原因是类：

.headerH1Style {
  width: 100%;
}

当您将类设置为“col-xs-4 headerH1Style”时，css首先读取col-xs-4的宽度，然后使用headerH1Style的宽度属性覆盖它

只需删除width:100%属性就可以使col-xs-4类正常工作

EDIT:Float:left应使表单对象内联。这并不是h1在按顺序推送表单，而是输入和按钮在css中没有适当的位置属性

<div class="col-xs-4 searchStyle">

    <form class="form-inline SearchStyle2 ">
        <input type="text " class="form-control " placeholder="Enter ISBN " style="float:left">
        <div class="input-group-append " "float:left">
            <button class="btn btn-primary " type="button ">Search</button>
        </div>
    </form>
</div>


搜寻
我删除了该属性，但问题仍然存在：（主要问题是搜索按钮未与文本字段内联吗？如果是，请尝试添加此按钮以放置输入和按钮：style=“float:left”.检查上面的编辑代码。请查看屏幕截图，搜索栏与h1标记重叠。当我减小屏幕大小时，会发生
容器流体
应该是
容器流体
…并且引导V4中没有更多的X