ブートストラップインラインCSSを使用しているときに応答性が失われる

Question

ブートストラップCSSを使用するUIで作業しています。ブートストラップを使ってHTMLフォームを作成しようとしています。ブラウザのサイズを変更しないと、私のコードは完全に機能します。ブラウザのサイズを変更するとすぐに、応答が失敗します。 下のスニペットでは、ラベル&のtextareaタグにインラインCSSスタイルを使用しています。そのため、ブラウザのサイズを変更すると、ブートストラップの応答機能を使用して他の要素が整列するので、それらは正しく整列しません。

グリッドクラスのカップルを適用しようとしましたが、まだ動作していません。どのようにこれを修正するための任意のアイデア？

スクリーンショット：

コードスニペット：

<!-- Form starting --> 
 
      <div class="box box-primary"> 
 
       <div class="box-header with-border"> 
 
        <h3 class="box-title">Project Details</h3> 
 
        <div class="box-tools pull-right"> 
 
         <button type="button" class="btn btn-box-tool" 
 
          data-widget="collapse"> 
 
          <i class="fa fa-minus"></i> 
 
         </button> 
 
        </div> 
 
       </div> 
 
       <!-- /.box-header --> 
 

 
       <!-- box body --> 
 
       <div class="box-body" style="margin-left: 15px;"> 
 
        <div class="row"> 
 
         <form role="form" class="form-horizontal"> 
 

 
          <!-- left side --> 
 
          <div class="col-md-6"> 
 
           <div class="form-group"> 
 
            <label for="inputProjectID" class="col-sm-3 control-label"> 
 
             Project ID</label> 
 

 
            <div class="col-sm-8"> 
 
             <input type="text" class="form-control" id="inputProjectID" 
 
              placeholder="Project ID" tabindex="1"> 
 
            </div> 
 
           </div> 
 
           <div class="form-group"> 
 
            <label for="inputReleaseDate" class="col-sm-3 control-label">Release 
 
             Date </label> 
 

 
            <div class="col-sm-8"> 
 
             <input type="text" class="form-control" id="datepicker" 
 
              placeholder="Release Date (mm/dd/yyyy)" tabindex="3"> 
 
            </div> 
 
           </div> 
 
          </div> 
 
          <!-- left side ends --> 
 

 
          <!-- right side --> 
 
          <div class="col-md-6"> 
 
           <div class="form-group"> 
 
            <label for="inputProjectName" class="col-sm-3 control-label">Project 
 
             Name</label> 
 

 
            <div class="col-sm-8"> 
 
             <input type="text" class="form-control" id="inputProjectName" 
 
              placeholder="Project Name" tabindex="2 "> 
 
            </div> 
 
           </div> 
 
           <div class="form-group"> 
 
            <label for="inputSupervisor" class="col-sm-3 control-label">Supervisor 
 
            </label> 
 

 
            <div class="col-sm-8"> 
 
             <input type="text" class="form-control" id="inputSupervisor" 
 
              placeholder="Supervisor" tabindex="4"> 
 
            </div> 
 
           </div> 
 
          </div> 
 
          <!-- right side ends --> 
 

 
          <!-- Form continues --> 
 
          <div class="col-md-12"> 
 
           <div class="form-group"> 
 

 
            <label for="projectDesc" style="margin-left:-46px;" 
 
             class="col-sm-2 control-label">Project Description</label> 
 

 
            <div class="col-md-10 col-sm-8"> 
 
             <textarea style="resize: none;" class="form-control" rows="3" placeholder="Enter the Project Description" tabindex="5"></textarea> 
 
            </div> 
 
           </div> 
 
          </div> 
 
         </form> 
 
         <!-- /.form-group --> 
 
        </div> 
 
        <!-- /.row --> 
 
       </div> 
 
       <!-- /.box body ends --> 
 
      </div> 
 
      <!-- /.box-primary ends -->

Answer 1

<!-- Form starting --> 
 
      <div class="box box-primary"> 
 
       <div class="box-header with-border"> 
 
        <h3 class="box-title">Project Details</h3> 
 
        <div class="box-tools pull-right"> 
 
         <button type="button" class="btn btn-box-tool" 
 
          data-widget="collapse"> 
 
          <i class="fa fa-minus"></i> 
 
         </button> 
 
        </div> 
 
       </div> 
 
       <!-- /.box-header --> 
 

 
       <!-- box body --> 
 
       <div class="box-body" style="margin-left: 15px;"> 
 
        <div class="row"> 
 
         <form role="form" class="form-horizontal"> 
 

 
          <!-- left side --> 
 
          <div class="col-md-6"> 
 
           <div class="form-group"> 
 
            <label for="inputProjectID" class="col-sm-3 control-label"> 
 
             Project ID</label> 
 

 
            <div class="col-sm-8"> 
 
             <input type="text" class="form-control" id="inputProjectID" 
 
              placeholder="Project ID" tabindex="1"> 
 
            </div> 
 
           </div> 
 
           <div class="form-group"> 
 
            <label for="inputReleaseDate" class="col-sm-3 control-label">Release 
 
             Date </label> 
 

 
            <div class="col-sm-8"> 
 
             <input type="text" class="form-control" id="datepicker" 
 
              placeholder="Release Date (mm/dd/yyyy)" tabindex="3"> 
 
            </div> 
 
           </div> 
 
          </div> 
 
          <!-- left side ends --> 
 

 
          <!-- right side --> 
 
          <div class="col-md-6"> 
 
           <div class="form-group"> 
 
            <label for="inputProjectName" class="col-sm-3 control-label">Project 
 
             Name</label> 
 

 
            <div class="col-sm-8"> 
 
             <input type="text" class="form-control" id="inputProjectName" 
 
              placeholder="Project Name" tabindex="2 "> 
 
            </div> 
 
           </div> 
 
           <div class="form-group"> 
 
            <label for="inputSupervisor" class="col-sm-3 control-label">Supervisor 
 
            </label> 
 

 
            <div class="col-sm-8"> 
 
             <input type="text" class="form-control" id="inputSupervisor" 
 
              placeholder="Supervisor" tabindex="4"> 
 
            </div> 
 
           </div> 
 
          </div> 
 
          <!-- right side ends --> 
 

 
          <!-- Form continues --> 
 
          <div class="col-md-12"> 
 
           <div class="form-group"> 
 

 
            <label for="projectDesc" style="@media(min-width:768px){margin-left:-46px;}" 
 
             class="col-sm-2 control-label">Project Description</label> 
 

 
            <div class="col-md-10 col-sm-8"> 
 
             <textarea style="resize: none;" class="form-control" rows="3" placeholder="Enter the Project Description" tabindex="5"></textarea> 
 
            </div> 
 
           </div> 
 
          </div> 
 
         </form> 
 
         <!-- /.form-group --> 
 
        </div> 
 
        <!-- /.row --> 
 
       </div> 
 
       <!-- /.box body ends --> 
 
      </div> 
 
      <!-- /.box-primary ends -->