为什么在固定位置固定bootstrap 4 col-md-3块减少？

Question

在Bootstrap 4中，当我使用脚本将块位置从相对位置更改为固定位置时，它会减少块。

我正在使用粘性类

.sticky {
  position: fixed !important;
  top: 2%;
}

将元素（empty_row）的位置从相对位置更改为固定位置。为什么会这样，以及我如何解决这个问题？

请在宽屏幕上查看此代码，因为我有2个块，其中有类名col-md-3和col-md-8。你只能在宽屏幕上看到这个问题。

在这里你可以在我的codepen中看到这个例子

let avatarSimple = document.querySelector(".avatar_simple");
let avatarQuantumBreak = document.querySelector(".avatar_quantum_break");

avatarQuantumBreak.style.opacity = "0";

let hover = () => {
	avatarQuantumBreak.style.opacity = "1";
}
let normal = () => {
	avatarQuantumBreak.style.opacity = "0";
}

// scroll function position fixed
window.onscroll = function() {
  var scrolled = window.pageYOffset || document.documentElement.scrollTop;
  scrolled >= 20 ? document.querySelector(".empty_row").classList.add("sticky") : document.querySelector(".empty_row").classList.remove("sticky");
}

.header_home {
	text-align: right;
}
.home_link , .main_text {
	color: #fff;
	font-size: 1.5em;
}
.left_block {
  padding: 30px 20px 20px;
  box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2); 
}
.avatar {
  position: relative;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  height: 195px;
}
.avatar_simple,
.avatar_quantum_break {
  position: absolute;
  display: block;
  text-align:center;
  transition: opacity 1s ease-out;
}
.avatar .avatar_simple img,
.avatar .avatar_quantum_break img {
  border-radius: 50%;
  display: inline-block;
}
.info {
  margin-top: 33px;
}
.text_uppercase {
  text-transform: uppercase;
  color: #fff;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 15px;
}
.text_muted {
  text-align: center;
  opacity: 0.65;
}
.download_resume {
  position: absolute;
  width: 100%;
  left: 0%;
  padding: 30px;
  margin: 0;
  font-size: .875em;
  background-color: #313C42;
  box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}
.text_widget {
  vertical-align: middle;
}
.text_widget a {
  background-color: #DEC746 !important;
  border-color: #DEC746 !important;
  color: #000 !important;
  font-size: 15px !important;
  padding: 12px 30px !important;
  border-radius: 35px !important;
}
center {
  display: block;
  text-align: -webkit-center;
}
.btn_link {
  font-weight: 700 !important;
}
.main_wrap, .personal_info {
  background-color: #313C42;
  border:1px solid #2C363B;
}
.basic_info {
  padding: 40px 0 40px 0;
}
.btn-bordered {
  border-color: #1FA184 !important;
}
.personal_info {
  margin-top: 15px;
}
/*skills*/
.left_block_align > .col-md-3 {
  padding-left: 0px !important;
  padding-right:0px !important;
}
.brd_btm {
  border-bottom: 1px solid #2C363B;
}
.section {
  margin-bottom: 30px;
}
.sticky {
  position: fixed !important;
  top: 2%;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container">
  <div class="row justify-content-between left_block_align">
    <div class="col-md-3">
      <div class="empty_row left_block" style="background-color: #1FA184;">
        <div class="avatar" onmouseover="hover();" onmouseout="normal();">
          <span class="avatar_simple">
            <img  src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-1-195x195.png">
          </span>
          <span class="avatar_quantum_break">
            <img src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-2-195x195.png">
          </span>
        </div>
        <div class="info">
          <h2 class="text_uppercase">Sergio Ramos</h2>
          <p class="text_muted">Front End Developer</p>
        </div>
        <div class="download_resume">
          <div class="text_widget">
            <center>
              <a href="#" class="btn btn-primary btn-lg btn_link">Download CV</a>
            </center>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-8">
      <div class="main_wrap">
        <div class="basic_info">
          <section id="about" class="section_about padd_box">
            <div class="row">
              <div class="col">
                <h2 class="title text_uppercase">About Me</h2>
                <p><b>Hello, I’m Robert Smith</b></p>
                <p>Hello! I’m Robert Smith. Senior Web Developer specializing in front end development. Experienced with all stages of the development cycle for dynamic web projects. Well-versed in numerous programming languages including JavaScript, SQL, and C. Stng background in project management and customer relations.</p>
                <div class="share-box">
                  <button class="share-btn btn btn-primary btn-bordered text_uppercase">
                    <span class="fa fa-share-alt"></span>
                    Share
                  </button>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
      <div class="personal_info">
        <div class="basic_info padd_box">
          <section id="skills" class="brd_btm section">
           Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam voluptates a sed similique harum reiciendis quos minus blanditiis aliquam. Amet adipisci veritatis quam quisquam animi cum dolorum natus quae eligendi.
          </section>
          <section class="brd_btm section">
           Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam qui, amet officiis veniam maiores odio sed fuga quo ut quis esse! Consectetur tempore accusantium blanditiis cupiditate eligendi ratione quisquam nostrum.
          </section>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

如果我理解您的问题是正确的，那么您将相对定位元素更改为固定定位元素。

在CSS中，第一个有一个相对width到它的父（因为<div>通常设置为display:block，它的100％.col-md-3），但通过将其更改为position: fixed，你必须使用绝对宽度。

我会做这样的事情：

.sticky {
  position: fixed !important;
  top: 2%;

  width: 285px; //285px is the absolute width of .col-md-3 on my lg screen.
  // Add breakpoints to ensure responsiveness
}