正確地在菜單內正確地浮動多個元素

我知道這已經被問過，但我無法讓它在我的情況下工作。我試圖顯示一個帶有搜索選項的菜單欄和左側的內嵌文本。無論哪種方式，當我浮出正確時，我無法獲得所需的順序。這裏的jfiddle：https://jsfiddle.net/z8f890Ln/正確地在菜單內正確地浮動多個元素

我試圖通過使用包含的div並使用此代碼來解決這個問題： HTML

<div class="right"> 
    <span class="navbar-text"> 
     Navbar text with an inline element 
    </span> 
    <div class="right-right"> 
    <form> 
     <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0 button-arrow" type="submit">Search</button> 
    </form> 
    </div> 
    </div>

CSS

.right{ 
    display: inline-block; 
    float: right; 
} 
.right .right-right{ 
    float: right; 
    display: inline; 
}

來源

2017-04-05 natem1270

林我不是很確定你想要什麼？ –

你想讓它響應或固定寬度。如果您嘗試響應，您需要編寫更多的CSS並針對所有分辨率進行正確測試。如果它固定設計，確保所有元素都有足夠的寬度以適合彼此相鄰。 –

響應。試圖擁有正確的花車順序 – natem1270

你並不需要額外的CSS類。只需使用navbar-form navbar-right ...

<form class="navbar-form navbar-right" role="search"> 
     <div class="form-group"> 
      Navbar text 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Search</button> 
</form>

http://www.bootply.com/pqNzsnRKJ7#

來源

2017-04-05 21:30:31 ZimSystem

謝謝！剛剛得到它的工作，但與我的解決方案相比，我的解決方案真的很複雜。 – natem1270

還有誰愛Bootstrap！ – ZimSystem

正確地在菜單內正確地浮動多個元素

回答

相關問題