ブートストラップ - 入力グループとアドオンのラベルの幅の整列

以下は、私の入力グループの現在の状態を示しています。私は幅がlabelsのになりたい等しいブートストラップ - 入力グループとアドオンのラベルの幅の整列

（FXが。ラベルは幅の25％を占めており、入力が最後の75％を占める）

私はカスタムを追加しようとしましたCSSしかし、それはちょうど（何らかの理由で）全体を縮小してしまいました。

私は（ハードコードではないピクセル値が、％値のようなので、あなたが小さなウィンドウを作る場合には、スケール）は、このダイナミックな

を作ることを好むだろう。

私のコードは次のようになります。

<div class="col-md-6" style="text-align: center"> 
    <div class="input-group input-group-lg form-group"> 
     <label class="input-group-addon">Område: </label> 
     <select name="AreaId" asp-for="AreaId" class="form-control"> 
     <option disabled selected value=""> -- Vælg et område -- </option>   
      @foreach (var a in Model.Areas) { 
       <option value="@a.ProfileID">@a.Name</option> 
      } 
     </select> 
    </div> 
    <div class="input-group input-group-lg form-group"> 
     <label class="input-group-addon" asp-for="ProductNumber">Varenummer: </label> 
     <input name="ProductNumber" asp-for="ProductNumber" class="form-control" type="text" placeholder="Indtast varenummer" maxlength="8" /> 
    </div> 
    <div class="input-group input-group-lg form-group"> 
     <label class="input-group-addon" asp-for="OrderNumber">Ordrenummer: </label> 
     <input name="OrderNumber" asp-for="OrderNumber" class="form-control" type="text" placeholder="Indtast ordrenummer" /> 
    </div> 
    <div class="input-group input-group-lg form-group"> 
     <label class="input-group-addon" asp-for="DateRange">Dato (Fra-Til): </label> 
     <input id="daterange" name="DateRange" asp-for="DateRange" class="form-control" type="text" value="" placeholder="Klik i boksen og vælg til/fra dato" /> 
    </div> 
</div>

すべてのヘルプは大歓迎です。前もって感謝します！

EDIT：は入力グループでフォームグループの私の組み合わせを固定しない - のクラスはもはや

。また、それは意志あなたのコードにいくつかのCSSを追加JSFiddle

出典

2017-02-02 Thomas Kjærhus Jørgensen

ブートストラップのドキュメント（http://getbootstrap.com/components/#input-groups）特異他の成分と組み合わせる入力グループを阻止] - 私はそれを固定することによって開始します。 –

@TiesonT。私は今それを修正した。前にそれを修正していない私の間違い。私はこれを実際に読む前にそれを読んでいましたが、私のプロジェクトでそれを修正していなかったことさえ気づかなかった（それに固定されています）。しかし、それは問題を解決しません。要素にカスタムスタイリングを追加してもまだwierdが動作していますが、まったく同じ問題を抱えている人を見つけることができず、解決策を求めています:) –

を追加したのと同じdiv要素に追加されます仕事...

.input-group-addon { 
    min-width:60%; 
    text-align:left; 
}

作業のコードスニペット

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <style type="text/css"> 
 
      \t .input-group-addon { width: 60%; } // Or whatever width you want 
 

 
/*.input-group { width: 100%; } 
 
      </style> 
 
      
 
    </head> 
 

 
    <body> 
 
    <div class="col-md-6" style="text-align: center"> 
 
    <div class="row"> 
 
    <div class="row"> 
 
    <div class="input-group input-group-lg form-group"> 
 
     <label class="input-group-addon">Område: </label> 
 
     <select name="AreaId" asp-for="AreaId" class="form-control"> 
 
     <option disabled selected value=""> -- Vælg et område -- </option>   
 
      @foreach (var a in Model.Areas) { 
 
       <option value="@a.ProfileID">@a.Name</option> 
 
      } 
 
     </select> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="input-group input-group-lg form-group"> 
 
     <label class="input-group-addon" asp-for="ProductNumber">Varenummer: </label> 
 
     <input name="ProductNumber" asp-for="ProductNumber" class="form-control" type="text" placeholder="Indtast varenummer" maxlength="8" /> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="input-group input-group-lg form-group"> 
 
     <label class="input-group-addon" asp-for="OrderNumber">Ordrenummer: </label> 
 
     <input name="OrderNumber" asp-for="OrderNumber" class="form-control" type="text" placeholder="Indtast ordrenummer" /> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="input-group input-group-lg form-group"> 
 
     <label class="input-group-addon" asp-for="DateRange">Dato (Fra-Til): </label> 
 
     <input id="daterange" name="DateRange" asp-for="DateRange" class="form-control" type="text" value="" placeholder="Klik i boksen og vælg til/fra dato" /> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body> 
 
    </html>

出典

2017-02-02 08:57:32 neophyte

レスポンスが不足しているため私は使うつもりです。それは私が必要とするもの（何かのこと）です。 –

ブートストラップ - 入力グループとアドオンのラベルの幅の整列

答えて

関連する問題