使用 bootstrap 的徽标图像和搜索框在调整浏览器 window 大小时重叠

Question

所以我试图将徽标图像（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>

下面是推特bootstrap之后应用的自定义css：

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;
}

这些似乎可以很好地内联堆叠，但是在调整浏览器大小时window从右边文本框越过图像并使它黯然失色。

我希望它具有响应性，但文本框不应遮挡任何 window 尺寸的图像。我尝试使用 z-index 将文本框设置为 0，但没有用。有什么办法绕过它吗？

Answer 1

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

bootply

使用 bootstrap 的徽标图像和搜索框在调整浏览器 window 大小时重叠

Logo image and searchbox using bootstrap are overlapping upon resizing browser window

html

css

inline

twitter-bootstrap

twitter-bootstrap-3