使用内联css时Bootstrap响应失败

Question

我正在使用引导CSS的UI工作。我正在尝试使用bootstrap创建HTML表单。当我不调整浏览器的大小时，我的代码完美工作。只要我调整浏览器的大小，tr响应失败。 在下面的代码片段中，我使用了标签& 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 -->