Html 徽标图像和使用引导的搜索框在调整浏览器窗口大小时重叠

因此，我尝试将徽标图像（543*183）像素与搜索框对齐，根据Bootstraps的网格系统概述，我使用以下方法：

这是你的电话号码

1行2列：

<div class="container">
    <div class="row">    
        <div class="col-xs-6 col-lg-6">
            <img src="Icon.png" class="logo img"/>
        </div>
        <div class="col-xs-6 col-lg-6">
                <input class="top-search" type="text" placeholder="Search">
        </div>
    </div>  
</div>    

这些看起来可以很好地进行内联叠加，但是当调整浏览器窗口的大小时，文本框会覆盖图像并使其黯然失色

---

我希望它是响应，但文本框不应该掩盖任何窗口大小的图像。我尝试使用z-index将文本框t设置为0，但没有效果。有办法绕过它吗？

您可以删除顶级搜索类的-200左边距。并将col-xs-6更改为col-sm-6

---

您可以删除顶级搜索类的-200左边距。并将col-xs-6更改为col-sm-6

---

为什么要在.top搜索中使用-200左边距？这是为了使文本框保持在正文填充中。我把它拿走了。问题仍然存在。请从正文标记中删除填充，这是您想要的吗？为什么要将-200左边距应用于。顶部搜索？这是为了使文本框保持在正文填充中。我把它拿走了。问题仍然存在。请从车身标签上移除衬垫，这是您想要的吗？

body {
    padding-left: 180px;
    padding-right: 250px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.logo {
   height: 80px;
   width: 300px;
}

.top-search {
    height: 50px;
    width: 400px;
    margin-top: 10px;
}