ブートストラップのテキストボックスとボタンの配置

Question

私はアプリケーションにプラグインしようとしているいくつかの基本的なブートストラップとHTMLコードを持っています。以下のコードはテキストボックスを1行に配置しますが、テキストボックスのすぐ下にボタンとActionLinkがあります。私はこれらの機能の3つすべてをページの1つの行に配置しようとしています。

これは、ページがカラムオフされ、テキストボックスが最初のカラム幅の100％を占めるようにプログラムされているかのようです。私はそれを変更しようとすることができますが、現在の幅でテキストボックスを維持することをお勧めします。

注意：テキストボックスのすぐ隣にボタンを配置しようとしましたが、まだその下にプッシュされています。そのため、ページが列詰めされ、テキストボックスが最初の列の100％ 。

@using (Html.BeginForm("Index", "Person", FormMethod.Get)) 
{ 
<form asp-action="Index" method="get"> 
    <div class="row"> 
     <div class="form-actions no-color col-md-12"> 
      <p> 
       Find by name: <input type="text" class="form-control" id="txtSearch" name="searchString" value="@ViewBag.CurrentFilter" /> 
       <input type="submit" value="Search" class="btn btn-default" /> | 
       @Html.ActionLink("Back to List", "Index") 
      </p> 
     </div> 
    </div> 
</form> 
} 

New Code: 
<form class="form-inline"> 
    <div class="form-group"> 
     <label for="txtSearch">Find by name:</label> 
     <input type="text" class="form-control" display="inline-block" id="txtSearch" name="searchString" /> 
     <input type="submit" value="Search" class="btn btn-default" /> | 
    </div> 
    @Html.ActionLink("Back to List", "Index") 
</form> <br /> 

Answer 1

かみそりのコードを編集し、inline form with bootstrap classesを作成し、あなたは

<form class="form-inline"> 
    <div class="form-group"> 
     <label for="txtSearch">Find by name:</label> 
     <input type="text" class="form-control" id="txtSearch" name="searchString" /> 
    </div> 
    <input type="submit" value="Search" class="btn btn-default" /> | 
    <a href="#"> Back To List </a> 
</form> 

Answer 2

にそれを戻す必要があります問題は、クラスの「フォームコントロール」のfisrt入力テキスト。その表示はブロックです。テキストの幅を維持したい場合。ディスプレイをインラインブロックに設定し、幅を設定します。