ブートストラップモード内のテキストボックスの寸法

Question

私はブートストラップモード内にテキストボックスを持っています。ここでは、出力例を見ることができます：

黄色の部分は、元の応答の一部ではありません。テキストボックスにデフォルトの寸法があり、これがモーダルサイズと一致しないことを示すために追加したものです。

私の目的は、黄色の部分にテキストボックスを塗りつぶすことです。言い換えれば、私はテキストボックスのサイズがモーダルサイズと一致すると思います。問題は、これを実行する方法はありますか？ 私はあなたのコード内で見ることができるようにモーダルで、テキストボックスには、フォームのセクションの一部ではないことを追加します。

<div id="myModal2" class="modal fade" role="dialog"> 
         <div class="modal-dialog"> 
         <div class="modal-content"> 
           <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal">&times;</button> 
           <h4 class="modal-title">Editing Menu</h4> 
           </div> 
           <div class="modal-body"> 
           <textarea id='areaforinfo' readonly></textarea> 
           <form id="updateeventsform2" class="form-horizontal"> 
           <div class="form-group"> 
           <label class="col-sm-2 control-label" 
              for="inputNotes">Notes</label> 
           <div class="col-sm-10"> 
            <input type="text" class="form-control" 
            id="newnote" name ="newnote" placeholder="Put here the note"/> 
           </div> 
           </div> 
           <div class="form-group"> 
           <label for = "type" class = "col-sm-2 control-label">Status</label> 
          <div class = "col-sm-10"> 
          <select class = "form-control" id = "newstatus" name="newstatus"> 
          <option value="open">open</option> 
           <option value="closed">closed</option> 
          </select> 
         </div> 
           </div> 
          </form> 
          </div> 
           </div> 
           <div class="modal-footer"> 
           <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
           <button type="submit" class="btn btn-primary" data-dismiss="modal">Save</button> 
           </div> 
          </div> 
          </div> 

は、私は、フォームのセクション内のテキストボックスのコードを置くべきか？

Answer 1

わかりました。私は単にフォームの中にテキストボックスを置き、クラス属性を追加します。最終結果は

<div class="modal-body"> 
           <form id="updateeventsform2" class="form-horizontal"> 
           <div class="form-group"> 
           <textarea class = "form-control" id='areaforinfo' style="min-width: 100%" readonly></textarea> 

です。