滚动时如何解决使用位置固定元素变小的问题

Question

当 div 元素得到修复时，联系我们的表单会变小 15 像素，我无法弄清楚问题是什么以及如何修复它。

    <div class="container">
                           
    <section class="property-details-section">
                                
      <div class="col-md-8 section-styles">
            
           <h1 class="text-center ">Property Details</h1>
              <div class="row">
            
              <ul class="list-group">
                 <li class="list-group-item">Cras justo odio<span>Result</span></li>
                 <li class="list-group-item">Dapibus ac facilisis in<span>Result</span></li>
                  <li class="list-group-item">Morbi leo risus<span>Result</span></li>
                  <li class="list-group-item">Porta ac consectetur ac<span>Result</span></li>
             </ul>
            
         <ul class="list-group">
               <li class="list-group-item">Cras justo odio<span>Result</span></li>
               <li class="list-group-item">Dapibus ac facilisis in<span>Result</span></li>
               <li class="list-group-item">Morbi leo risus<span>Result</span></li>
                <li class="list-group-item">Porta ac consectetur ac<span>Result</span></li>
             
            </ul>
                      
                     </div>
            
                </div>
                                 
              </section>
            
            </div>

完整代码在这里：https://jsfiddle.net/kani339/km83psw5/14/ 谢谢

Answer 1

请试试这个

.btn { width: 142px; }

或者

.form-control { min-width: 290px; }

Answer 2

一个简单的解决方案可能是使用与position:sticky 一起使用的sticky-top 类（但不能完全跨浏览器）。为此，您必须更改一些 html 结构并将所有内容放入一个 div（在您的示例中为 col-md-8）。 这是文档：https://getbootstrap.com/docs/4.0/utilities/position/，这是 Stackoverflow 中相关的帖子：How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

我从您的代码开始创建了一个非常快速的示例，以便您了解它的工作原理。

.section-styles {
    background-color: #fff;
}


.static-contact-form > form {
    padding:30px;
}

/*.sticky {
    position: sticky;
    top: 0;
    width: 360px;
    z-index: 100;
    padding: 0;
}*/

.static-contact-form h2 {
    background-color: #007bff;
    padding: 15px;
    color: #fff;
    border-bottom: 2px solid #0a6eda;
}




.form-control:focus {
    box-shadow: none;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  
                <!-- Property Details Section -->
                <section class="property-description-section">
                    <div class="row">

                        <div class="col-md-8">
                            <div class="property-description section-styles">
                                <h1 class="text-center">Property description</h1>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt alias at sequi aut mollitia aperiam aspernatur, voluptatibus, architecto nam voluptatem quae consequuntur quos omnis. Nesciunt quos officia recusandae voluptatum? Explicabo id similique at, architecto neque, ea laboriosam, aspernatur culpa est exercitationem distinctio quam adipisci sed deleniti. Asperiores, quae expedita sint eligendi quo dolorum error consequatur accusamus, deserunt blanditiis iste animi. Nihil voluptate, eius, dolor cupiditate quisquam fugit dolores iure, voluptatem repudiandae blanditiis excepturi tempore rem temporibus vero. Nostrum aliquid pariatur repudiandae soluta excepturi labore nobis accusamus, ab dolorum animi incidunt nesciunt reprehenderit recusandae? Ea sunt perferendis pariatur eos, fugit quasi fugiat atque a! Voluptates accusamus, temporibus eaque omnis error similique. Non ratione quisquam ea enim, distinctio necessitatibus dolore ducimus laboriosam perferendis rem porro quam iure, dignissimos rerum excepturi iusto dicta. Blanditiis placeat veniam eos dolorum nulla distinctio facilis magni reprehenderit expedita, quaerat maiores quae voluptates sapiente voluptatem sed sit numquam?</p>
                            </div>


                            <h1 class="text-center ">Property Details</h1>
                            <div class="row">

                            <ul class="list-group">
                                <li class="list-group-item">Cras justo odio<span>Result</span></li>
                                <li class="list-group-item">Dapibus ac facilisis in<span>Result</span></li>
                                <li class="list-group-item">Morbi leo risus<span>Result</span></li>
                                <li class="list-group-item">Porta ac consectetur ac<span>Result</span></li>
                            </ul>

                            <ul class="list-group">
                                <li class="list-group-item">Cras justo odio<span>Result</span></li>
                                <li class="list-group-item">Dapibus ac facilisis in<span>Result</span></li>
                                <li class="list-group-item">Morbi leo risus<span>Result</span></li>
                                <li class="list-group-item">Porta ac consectetur ac<span>Result</span></li>
 
                             </ul>


 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium mollitia nihil amet, est doloremque ipsam voluptas nesciunt vel accusantium culpa quam illo non sit tenetur officiis earum voluptatum aperiam ratione sunt eius iste magni assumenda. Cupiditate eos harum rerum iure, cum dolores iusto labore at, tempora est numquam totam mollitia fugit fuga rem laborum eligendi magnam! At, quos accusamus ipsa earum neque impedit et dicta possimus vero iure itaque architecto quo, repellendus alias magni corporis exercitationem iste aliquam esse, blanditiis sit sequi deserunt. Nemo, placeat error tenetur nisi. Laboriosam praesentium quidem similique non aut maiores, repudiandae voluptatem tenetur placeat nulla.</p>
                       
                       
                            </div>




                        </div>
                        

                        <div class="col-md-4">
    
                            <div class="static-contact-form section-styles sticky-top">

                                <h2>Contact Us</h2>

                                <div class="phonering-alo-phone phonering-alo-green phonering-alo-show" id="phonering-alo-phoneIcon">
                                    <div class="phonering-alo-ph-circle"></div>
                                    <div class="phonering-alo-ph-circle-fill"></div>
                                    <a href="tel:" class="pps-btn-img" title="Phone">
                                        <div class="phonering-alo-ph-img-circle"></div>
                                    </a>
                                </div>

                                <form>
                                    <div class="form-group group">
                                        <input type="text" class="form-control inputMaterial" autocomplete="off" required>
                                        <span class="highlight"></span>
                                        <span class="bar"></span>
                                        <label>Your Name</label>
                                    </div>

                                    <div class="form-group group">
                                        <input type="number" class="form-control inputMaterial" autocomplete="off" required>
                                        <span class="highlight"></span>
                                        <span class="bar"></span>
                                        <label>Phone Number</label>
                                    </div>

                                    <div class="form-group group">
                                        <input type="email" class="form-control inputMaterial" autocomplete="off" required>
                                        <span class="highlight"></span>
                                        <span class="bar"></span>
                                        <label>Email</label>
                                    </div>

                                    <div class="form-group group">
                                        <textarea name="" cols="10" rows="4" class="form-control inputMaterial" required></textarea>
                                        <span class="highlight"></span>
                                        <span class="bar"></span>
                                        <label>Your Message</label>
                                    </div>

                                    <button type="submit" class="btn btn-outline-primary">Send Message</button>
                                    <a href="#" class="btn btn-outline-success"><i class="fas fa-phone"></i>+371 2000000</a> 
                                </form>
                                
                            </div>
    
                       </div> 
                        
                    </div>
          
                </section>  
         
                
</div>