我主要使用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>
答案 0 :(得分：1)
请尝试将<div>的所有<div class="col-md-12 col-sm-12 col-xs-12 margin-bottom-20"></div>放在<div class="row">的顶部和底部{/ 1}}
实施例
<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>