ブートストラップ3での入力の制限サイズ

Question

私はブートストラップを使用しています。 コンポーネントが多くの領域を占めることがわかりました。

<div class="panel panel-default"> 
     <div class="panel-heading">Urgence</div> 
     <div class="panel-body"> 
      <div class="form-group"> 
      <label for="memberEmergencyContact" class="col-sm-3 control-label">Contact en cas d'urgence</label> 
      <div class="col-sm-9"> 
       <input type="text" class="form-control" id="memberEmergencyContact" name="emergencyContactName" placeholder="Entrer le contact en cas d'urgence"> 
      </div> 
      </div> 
      <div class="form-group"> 
      <label for="emergencyPhone" class="col-sm-3 control-label">Tél</label> 
      <div class="col-sm-9"> 
       <input type="text" class="form-control" id="emergencyPhone" name="emergencyPhone"> 
      </div> 
      </div> 
     </div> 
    </div> 

、私は非常に長いため、入力のサイズを小さくしたい画像 a link of the image

のリンク。

Answer 1

編集：私はちょうどあなたが欲しいものを実現しました。

は<div class="form-group">内部COL-MD-9又はいずれかLG、XS又はSMを定義します。したがって、フォームグループの横には<div class="col-md-9 form-group">となります。それ以外の場合は常に最大幅になります。また、form-groupを省略したり、別の場所に再定義することもできます。

---

は、使用 COL-LG-9デスクトップ用（ 大画面）など。 sm（ 小さな画面）と定義されています。 md（ 中画面）と xs（ 特別小画面）も使用してください。

そうで、これにあなたのdivを変更する：あなたはパネルが多くのスペースを取る理由だ行全体を使用しているため

<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9"> 
     <input type="text" class="form-control" id="memberEmergencyContact" name="emergencyContactName" placeholder="Entrer le contact en cas d'urgence"> 
</div> 

Answer 2

その。サイズを小さくするには、特定の列の幅を設定する必要があります。例えば

：

<div class="row"> 
<div class="col-md-6"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">Urgence</div> 
     <div class="panel-body"> 
      <div class="form-group"> 
      <label for="memberEmergencyContact" class="col-sm-3 control-label">Contact en cas d'urgence</label> 
      <div class="col-sm-9"> 
       <input type="text" class="form-control" id="memberEmergencyContact" name="emergencyContactName" placeholder="Entrer le contact en cas d'urgence"> 
      </div> 
      </div> 
      <div class="form-group"> 
      <label for="emergencyPhone" class="col-sm-3 control-label">Tél</label> 
      <div class="col-sm-9"> 
       <input type="text" class="form-control" id="emergencyPhone" name="emergencyPhone"> 
      </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="col-md-6"></div> 
</div>