複数の要素を正しくメニュー内に正しく配置する

Question

これは以前に尋ねられたことですが、私の場合は問題なく動作します。私は、左側に検索オプションとインラインテキストを持つメニューバーを表示しようとしています。いずれにせよ、私はどちらも右に浮かぶとき、私は望む順序を得ることができません。 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; 
} 

Answer 1

あなたは余分なCSSクラスを必要としないここでjfiddleです。ただ、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#