サイズ変更時のboostrapのバグの振る舞い

Question

私はたいてい問題なしでboostrapを使用しましたが、このページにはバグがあります。モバイルにはxs-12がありますが、work-experience divになっていて、背景色が上に移動しています。ここで

は、画面レコードです： https://youtu.be/vJ9FJrLYGM0

HTML：

<h3 class="text-center margin-bottom-20 col-xs-12 col-sm-12 col-md-12">Edit Service</h3> 

<div class="col-md-12 col-xs-12 col-sm-12"> 
    {% include 'snippets/service-form.html' %} 
</div> 

スニペット/サービス-form.html

<label class="col-md-4 col-sm-4 col-xs-12">Business/Company Name</label> 
<div class="col-md-8 col-sm-8 col-xs-12 margin-bottom-20"> 
    <input class="form-control company-name" type="text"> 
</div> 

<label class="col-md-4 col-sm-4 col-xs-12">Email address</label> 
<div class="col-md-8 col-sm-8 col-xs-12 margin-bottom-20"> 
    <input class="form-control email" type="text"> 
</div> 

<label class="col-md-4 col-sm-4 col-xs-12">Phone number</label> 
<div class="col-md-8 col-sm-8 col-xs-12 margin-bottom-20"> 
    <input class="form-control phone-no" type="text"> 
</div> 

<label class="col-md-4 col-sm-4 col-xs-12 font-normal">Company website or Facebook page URL</label> 
<div class="col-md-8 col-sm-8 col-xs-12"> 
    <input class="form-control company-website" type="text" placeholder="Copy and paste URL if applicable"> 
</div> 
<div class="col-md-12 col-sm-12 col-xs-12 margin-bottom-20"></div> 

<label class="col-md-4 col-sm-4 col-xs-12 font-normal">Location</label> 
<div class="col-md-8 col-sm-8 col-xs-12"> 
    <select class="selectpicker float-bottom location" title="Please Select One"> 
     <option></option> 
     {% for location in locations %} 
      <option>{{ location.name }}</option> 
     {% endfor %} 
     <option class="add-location dark-blue bold">Add a Location</option> 
    </select> 
    <input class="hidden new-location form-control margin-top-20" placeholder="Please add a new location"> 
</div> 
<div class="col-md-12 col-sm-12 col-xs-12 margin-bottom-20"></div> 

<label class="col-md-4 col-sm-4 col-xs-12">What service do you provide</label> 
<div class="col-md-8 col-sm-8 col-xs-12"> 
    <select class="selectpicker float-bottom service" title="Please select one or choose add a service"> 
     <option></option> 
     {% for service in services %} 
      <option>{{ service.name }}</option> 
     {% endfor %} 
     <option class="add-service dark-blue bold">Add a Service</option> 
    </select> 
    <input class="hidden new-service form-control margin-top-20" placeholder="Please add a new service"> 
</div> 
<div class="col-md-12 col-sm-12 col-xs-12 margin-bottom-20"></div> 

<label class="col-md-4 col-sm-4 col-xs-12">Business details</label> 
<div class="col-md-8 col-sm-8 col-xs-12"> 
    <textarea class="form-control textarea-height business-details" placeholder="provide detailed information about the nature of your work"></textarea> 
</div> 
<div class="col-md-12 col-sm-12 col-xs-12 margin-bottom-20"></div> 

<label class="col-md-4 col-sm-4 col-xs-12 font-normal">Testimonials</label> 
<div class="col-md-8 col-sm-8 col-xs-12"> 
    <input class="form-control testimonial" placeholder="provide links to previous jobs done if applicable"> 
    <a href="#" class="duplicate-link margin-top-10">Add link</a> 
</div> 
<div class="col-md-12 col-sm-12 col-xs-12 margin-bottom-20"></div> 

{% for exp in service.links.all %} 
    <div class="work-experience-div link-form col-md-12 col-sm-12 co-xs-12 col-lg-12" exp_id="{{ exp.id }}"> 
     <label class="col-md-3 col-sm-3">Link</label> 
     <div class="col-md-8 col-sm-6"> 
      <input type="text" name="" class="form-control link" placeholder="{{ exp.link }}"> 
      <p class="error-message hidden invalid-link">Invalid Link: make sure to start link with http:// or https://</p> 
     </div> 
     <div class="col-sm-12 col-md-12"></div> 

     <label class="col-md-3 col-sm-3">Description (Optional)</label> 
     <div class="col-md-8 col-sm-6 margin-bottom-small"> 
      <textarea class="form-control description link-description" placeholder="{{ exp.link_info|default:'Brief description of the link content' }}"></textarea> 
     </div> 
     <div class="col-md-12 col-sm-12 job-seeker-content-spacing"> 
      <a href='#' class='remove-exp pull-right'>Remove</a> 
     </div> 
    </div> 

{% endfor %} 

<div class="new-link margin-bottom-20"></div> 

<label class="col-md-4 col-sm-4 col-xs-12">How much do you charge for this service</label> 
<div class="col-md-8 col-sm-8 col-xs-12"> 
    <input class="form-control price price-field" placeholder="Please be specific ex. 1000 shillings per hour"> 
    <a href="#" class="add-price margin-top-10">Add another price</a> 
</div> 
<div class="col-md-12 col-sm-12 col-xs-12 margin-bottom-20"></div> 

{% for price in service.prices.all %} 
    <div class="work-experience-div price-form col-md-12 col-sm-12 co-xs-12 col-lg-12" exp_id="{{ price.id }}"> 
     <label class="col-md-3 col-sm-3">Price</label> 
     <div class="col-md-8 col-sm-6"> 
      <input type="text" class="form-control price" placeholder="{{ price.name }}"> 
     </div> 
     <div class="col-sm-12 col-md-12"></div> 
     <div class="col-md-12 col-sm-12 job-seeker-content-spacing"> 
      <a href='#' class='remove-exp pull-right'>Remove</a> 
     </div> 
    </div> 
{% endfor %} 

<div class="new-price margin-bottom-20"></div> 

<label class="col-md-4 col-sm-4 col-xs-12">Are your rates negotiable?</label> 
<div class="col-md-8 col-sm-8 col-xs-12"> 
    <div class="btn-group select-rates" data-toggle="buttons"> 
     <label class="btn btn-primary"> 
     <input type="radio" name="rates" value="yes" autocomplete="off"> Yes 
     </label> 
     <label class="btn btn-primary"> 
     <input type="radio" name="rates" value="no" autocomplete="off"> No 
     </label> 
    </div> 
    <p class="error-message hidden select-rate">Please select one option before you continue.</p> 
</div> 
<div class="col-md-12 col-sm-12 col-xs-12 margin-bottom-20"></div> 

Answer 1

上下にすべての<div>を配置してみてください。 <div class="col-md-12 col-sm-12 col-xs-12 margin-bottom-20"></div>のメールアドレス<div class="row">

例が働い+が行編集のビットと

<div class="row"> 
    //Place your content here 
</div> 

<div class="col-md-12 col-sm-12 col-xs-12 margin-bottom-20"></div> 
//FYI - There are several options to assign margins. 

<div class="row"> 
//Place your content here 
</div> 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<h3 class="text-center margin-bottom-20 col-xs-12 col-sm-12 col-md-12">Edit Service</h3> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-12"> 
 
     <label class="col-md-4 col-sm-4 col-xs-12">Business/Company Name</label> 
 

 
     <div class="col-sm-8 col-xs-12 margin-bottom-20"> 
 
     <input class="form-control company-name" type="text"> 
 
     </div> 
 

 
     <label class="col-md-4 col-sm-4 col-xs-12">Email address</label> 
 

 
     <div class="col-md-8 col-sm-8 col-xs-12 margin-bottom-20"> 
 
     <input class="form-control email" type="text"> 
 
     </div> 
 

 
     <label class="col-md-4 col-sm-4 col-xs-12">Phone number</label> 
 
     <div class="col-md-8 col-sm-8 col-xs-12 margin-bottom-20"> 
 
     <input class="form-control phone-no" type="text"> 
 
     </div> 
 

 
     <label class="col-md-4 col-sm-4 col-xs-12 font-normal">Company website or Facebook page URL</label> 
 
     <div class="col-md-8 col-sm-8 col-xs-12"> 
 
     <input class="form-control company-website" type="text" placeholder="Copy and paste URL if applicable"> 
 
     </div> 
 
     <div class="col-md-12 col-sm-12 col-xs-12 margin-bottom-20"></div> 
 
     <div class="row"> 
 
     <label class="col-md-4 col-sm-4 col-xs-12 font-normal">Location</label> 
 
     <div class="col-md-8 col-sm-8 col-xs-12"> 
 
      <select class="selectpicker float-bottom location" title="Please Select One"> 
 
     <option></option> 
 
      <option>{{ location.name }}</option> 
 
     <option class="add-location dark-blue bold">Add a Location</option> 
 
    </select> 
 
      <input class="hidden new-location form-control margin-top-20" placeholder="Please add a new location"> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-12 col-sm-12 col-xs-12 margin-bottom-20"></div> 
 
     <div class="row"> 
 
     <label class="col-md-4 col-sm-4 col-xs-12">What service do you provide</label> 
 
     <div class="col-md-8 col-sm-8 col-xs-12"> 
 
      <select class="selectpicker float-bottom service" title="Please select one or choose add a service"> 
 
     <option></option> 
 
      <option>{{ service.name }}</option> 
 
     <option class="add-service dark-blue bold">Add a Service</option> 
 
    </select> 
 
      <input class="hidden new-service form-control margin-top-20" placeholder="Please add a new service"> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-12 col-sm-12 col-xs-12 margin-bottom-20"></div> 
 
     <div class="row"> 
 
     <label class="col-md-4 col-sm-4 col-xs-12">Business details</label> 
 
     <div class="col-md-8 col-sm-8 col-xs-12"> 
 
      <textarea class="form-control textarea-height business-details" placeholder="provide detailed information about the nature of your work"></textarea> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-12 col-sm-12 col-xs-12 margin-bottom-20"></div> 
 
     <div class="row"> 
 
     <label class="col-md-4 col-sm-4 col-xs-12 font-normal">Testimonials</label> 
 
     <div class="col-md-8 col-sm-8 col-xs-12"> 
 
      <input class="form-control testimonial" placeholder="provide links to previous jobs done if applicable"> 
 
      <a href="#" class="duplicate-link margin-top-10">Add link</a> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <label class="col-md-4 col-sm-4 col-xs-12 font-normal">Testimonials</label> 
 
     <div class="col-md-8 col-sm-8 col-xs-12"> 
 
      <input class="form-control testimonial" placeholder="provide links to previous jobs done if applicable"> 
 
      <a href="#" class="duplicate-link margin-top-10">Add link</a> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-12 col-sm-12 col-xs-12 margin-bottom-20"></div> 
 
     <div class="row"> 
 
     <div class="work-experience-div link-form col-md-12 col-sm-12" exp_id="{{ exp.id }}"> 
 
      <label class="col-md-4 col-sm-4">Link</label> 
 
      <!--   <div class="col-md-8 col-sm-8"> --> 
 
      <div class="col-md-8 col-sm-8 col-xs-12"> 
 
      <input class="form-control testimonial" placeholder="provide links to previous jobs done if applicable"> 
 
      <a href="#" class="duplicate-link margin-top-10">Add link</a> 
 
      </div> 
 
      <!--    <input type="text" name="" class="form-control link" placeholder="{{ exp.link }}"/> 
 
      <p class="error-message hidden invalid-link">Invalid Link: make sure to start link with http:// or https://</p> 
 
     </div> --> 
 
      <!-- </div> --> 
 
     </div> 
 
     <div class="col-sm-12 col-md-12"></div> 
 
     <div class="row"> 
 
      <label class="col-md-4 col-sm-4">Description (Optional)</label> 
 
      <div class="col-md-8 col-sm-8 margin-bottom-small"> 
 
      <textarea class="form-control description link-description" placeholder="{{ exp.link_info|default:'Brief description of the link content' }}"></textarea> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-12 col-sm-12 job-seeker-content-spacing"> 
 
      <a href='#' class='remove-exp pull-right'>Remove</a> 
 
     </div> 
 

 

 
     <div class="new-link margin-bottom-20"></div> 
 
     <div class="row"> 
 
      <label class="col-md-4 col-sm-4 col-xs-12">How much do you charge for this service</label> 
 
      <div class="col-sm-8"> 
 
      <input class="form-control price price-field" placeholder="Please be specific ex. 1000 shillings per hour"> 
 
      <a href="#" class="add-price margin-top-10">Add another price</a> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-12 margin-bottom-20"></div> 
 
     <div class="row"> 
 
      <div class="work-experience-div price-form col-sm-12" exp_id="{{ price.id }}"> 
 
      <label class="col-sm-4">Price</label> 
 
      <div class="col-sm-8"> 
 
       <input type="text" class="form-control price" placeholder="{{ price.name }}"> 
 
      </div> 
 
      <div class="col-sm-12"></div> 
 
      <div class="col-sm-12 job-seeker-content-spacing"> 
 
       <a href='#' class='remove-exp pull-right'>Remove</a> 
 
      </div> 
 
      </div> 
 

 
      <div class="new-price margin-bottom-20"></div> 
 

 
      <label class="col-md-4 col-sm-4 col-xs-12">Are your rates negotiable?</label> 
 
      <div class="col-md-8 col-sm-8 col-xs-12"> 
 
      <div class="btn-group select-rates" data-toggle="buttons"> 
 
       <label class="btn btn-primary"> 
 
     <input type="radio" name="rates" value="yes" autocomplete="off"> Yes 
 
     </label> 
 
       <label class="btn btn-primary"> 
 
     <input type="radio" name="rates" value="no" autocomplete="off"> No 
 
     </label> 
 
      </div> 
 
      <p class="error-message hidden select-rate">Please select one option before you continue.</p> 
 
      </div> 
 
      <div class="col-md-12 col-sm-12 col-xs-12 margin-bottom-20"></div> 
 
     </div> 
 

 
     </div> 
 
    </div>