调整大小的boostrap buggy行为

时间:2017-10-01 17:14:02

标签: twitter-bootstrap

我主要使用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>

1 个答案:

答案 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>