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

Question

所以我试图将徽标图像（543 * 183）像素与搜索框一致，按照Bootstraps的网格系统概述给出，我使用以下内容：

以下是Bootply

包含2列的1行：

import org.json4s._
import org.json4s.jackson.JsonMethods._
implicit def formats = DefaultFormats

val r  = sc.textFile("input_path").map(l => (parse(l) \ "reviewText").extract[String])

下面是twitter bootstrap后应用的自定义css：

<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将文本boxt设为0但它没有帮助。有没有摆脱它？

Answer 1

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

bootply