ブートストラップ入力フォーム、検索ボタンと同じ行の別のボタン

Question

<div class="container-fluid"><br/> 
    <h3 >Content Mangement</h3><br/> 
    <div class="container-fluid"></div><br/> 
<div class="row"><br/> 
    <div class="col-md-2"><br/> 
     <input class="form-control custom-input-width pull-left" type="text"> <br/> 
    </div><br/> 
    <div class="col-md-10 text-right"><br/> 
    <button type="button" class="btn btn-primary">Search</button><br/> 
<button type="button" class="btn btn-success">Add Content</button><br/> 
    <button type="button" class="btn btn-success">Reoder</button><br/> 
    </div><br/> 

。私は最後の3〜4日間入力しています：

私は同じ行で、このテキストは、入力フォームやボタンをしたい：

Answer 1

あなたsturctureを修正するので、もしあなたの構造が壊れています適切な構造にするには、いくつかのCSS修正を使ってあなたの既存のアプローチで望むものを得ることができます。しかし、このようなレイアウト設計をするのは不適切なので、この方法をレイアウトする方が良い方法を提案できます。

は、しかし、あなたの現在のアプローチで、より正確な構造は次のようになります。

<div class="row"> 
     <div class="col col-md-4"> 
      <h3>Content Mangement</h3> 
     </div> 

     <div class="col col-md-2 col-md-offset-3"> 
      <input class="form-control custom-input-width" type="text"> 
     </div> 
     <div class="col col-md-1"> 
      <button type="button" class="btn btn-primary">Search</button> 
     </div> 
     <div class="col col-md-1"> 
      <button type="button" class="btn btn-success">Add Content</button> 
     </div> 
     <div class="col col-md-1"> 
      <button type="button" class="btn btn-success">Reoder</button> 
     </div> 
    </div> 
</div> 

、その後、いくつかのパディング修正して、あなたの現在のアプローチで設計を実現することができます