制作一个类似于youtube.com的搜索栏

Question

我需要使我的搜索栏静态，但一边调整到浏览器宽度。就像https://www.youtube.com上的一样。他们有什么方法可以轻松实现这一目标吗？如果不是，我怎么才能让我的搜索栏保持居中在我的屏幕上？

（我使用的引导3为我的网站）

`http://jsfiddle.net/lasquish/e0b66vy8/` 

Answer 1

在你的div使用样式=“显示：表”，以获得搜索按钮旁边的搜索栏出现。将margin设置为0px;在酒吧和按钮本身。然后使用最小宽度和一个％宽度来调整小节大小。并且在div上使用white-space:nowrap;以防止宽度太小时按钮和输入栏与换行符分离。

事情是这样的：http://jsfiddle.net/e0b66vy8/2/

 <form class="navbar-form navbar-left" role="search"> 
    <div class="form-group" style="display:table; white-space:nowrap;"> 

     <input type="text" class="form-control" placeholder="Search" size=60px style="margin:0px; min-width:160px; width:65%;"></input> 

    <button type="submit" class="btn btn-default" style="margin:0px;">Submit</button> 

     </div> 
    </form> 

如果你希望你的搜索栏不会在屏幕最左侧...
您可以使用margin-left:100px;（或其他值），以将其推从左侧过来。 （在margin:0px;

之后插入该CSS