製作一個類似於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