使用内联CSS时Bootstrap响应性失败

Question

I am working on a UI which involves use of bootstrap CSS. I am trying to create an HTML form using bootstrap. My code works perfectly when I don't resize my browser.As soon as I resize my browser, tr responsiveness fails. In the below snippet, I am using an inline css style for the label & textarea tags. So when I resize my browser, they don't align properly as other elements align using bootstrap's responsive feature.

Tried applying a couple of grid classes but still not working. Any idea as to how to fix this?

Screenshot:

Code Snippet:

  <!-- 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 -->