asp.net入力タグの幅を拡張できないブートストラップ

Question

私の次のものはViewブートストラップでは入力タグの幅を拡張できません。さらに、入力タグのラベルとボタンを左に揃えるのではなく、中央に配置します（上のドロップダウンの場合と同じです）。私は、ラベル、入力、およびボタンのためにブートストラップのグリッド列を4 + 7 + 1に配布しました。しかし、たとえ私がこの分布を3 + 8 + 1と変えたとしても、入力タグの幅は同じままです。 質問は：一番左の側面のラベルが表示され、右端の側のボタンが表示され、入力されたタグはそれのラベルとAddボタンの間に空間全体をとるようにどのように私はそれ表示にすることができ

ビュー：上記のビューの

<form asp-controller="TestContr" asp-action="TestAction" method="post" class="form-horizontal"> 
    <hr /> 
    <div asp-validation-summary="All" class="text-danger"></div> 
    <div class="form-group"> 
     <div class="col-md-9"> 
      <label asp-for="SelectedYear" class="control-label"></label> 
      <select asp-for="SelectedYear" asp-items="Model.lstYears"></select><button type="submit" name="submit" value="GO" class="btn btn-info btn-xs">GO</button> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label asp-for="TestDesc" class="control-label col-sm-4"></label> 
     <div> 
      <input asp-for="TestDesc" class="form-control col-sm-7"/><button type="submit" name="submit" value="Add" class="btn btn-info btn-xs col-sm-1">Add</button> 
      <span asp-validation-for="TestDesc" class="text-danger"></span> 
     </div> 
    </div> 
</form> 

表示ページ：

インラインスタイルstyle="width:300px;height:100px;"を入力タグに追加しても、幅は増えません。下に示すような高さのみを増加させる：ユーザー@MattSpinks Iが左右にラベルにAddボタンを整列させることができたから提案に従った後

UPDATE

。しかし、入力幅は、以下に示すように同じまま：

Answer 1

をasp-for="TestDesc"とあなたの入力時には、あなたのcol-sm-7で間違った場所を持っています。そのクラスは親divに割り当てられるべきです。そして、あなたのボタンはその親divと同じDOMレベルにあるはずです。あなたのコントロールのラベルクラスにtext-align: leftを追加し、左にラベルを揃えるためには

<form asp-controller="TestContr" asp-action="TestAction" method="post" class="form-horizontal"> 
    <hr /> 
    <div asp-validation-summary="All" class="text-danger"></div> 
    <div class="form-group"> 
     <div class="col-md-9"> 
      <label asp-for="SelectedYear" class="control-label"></label> 
      <select asp-for="SelectedYear" asp-items="Model.lstYears"></select><button type="submit" name="submit" value="GO" class="btn btn-info btn-xs">GO</button> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label asp-for="TestDesc" class="control-label col-sm-4"></label> 
     <div class="col-sm-7"> 
      <input asp-for="TestDesc" class="form-control"/> 
      <span asp-validation-for="TestDesc" class="text-danger"></span> 
     </div> 
     <button type="submit" name="submit" value="Add" class="btn btn-info btn-xs col-sm-1">Add</button> 
    </div> 
</form> 

：

.form-horizontal .control-label { 
    text-align:left; 
} 

ワーキングサンプル：https://jsfiddle.net/mspinks/9jevfug0/2/