绝对定位元素的自举响应

Question

我正在使用基于Flexbox的Bootstrap 4。现在如果我完全放置其中一列或其细分，会发生什么？他们会回应或不响应？

例子：

<div id="particles-js"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-sm-1"> 
       <img id="logo-small" src="img/logo-small.png" alt="logo"> 
      </div> 
      <div class="col-sm-2"> 
       <div id="navigation-buttons"> 
        <div class="nav-button"></div> 
        <div class="nav-button"></div> 
        <div class="nav-button"></div> 
        <div class="nav-button"></div> 
        <div class="nav-button"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

现在，如果我定位＃导航按钮绝，当浏览器大小的响应是行不通的。

CSS

#particles-js { 
     background-color: #252627; 
     height: 100vh; 
     position: relative; 
     width: 100%; 
    } 

    canvas { 
     display: block; 
    } 

    #logo-small { 
     position: absolute; 
     top: 50vh; 
    } 

    #navigation-buttons { 
     position: absolute; 
     top: 50vh; 
     width: 13px; 
     top: 50vh; 
     -webkit-transform: translate(0, -37%); 
    } 

PS：＃颗粒-JS是一个帆布

Answer 1

你需要让父母为位置：相对现在任何一个孩子，你这是位置绝对的，它将被放置就其正常情况下的父母位置而言。 绝对位置只会改变位置，它与响应无关。它将像其他代码的行为一样使用引导类。

请检查： http://jsfiddle.net/x1hphsvb/7/

HTML：

<div class="container"> 
    <div class="row"> 
    <div class="columns col-sm-4"> 
    First 
    </div> 
    <div class="columns col-sm-4"> 
    Second 
    </div> 
    <div class="columns col-sm-4 third"> 
    Third 
    <div class="container test"> 
     <div class="row"> 
     <div class="col-sm-4"> 
     Test1 
     </div> 
     <div class="col-sm-4"> 
     Test2 
     </div> 
     <div class="col-sm-4"> 
     Test3 
     </div> 
     </div> 
    </div> 
    </div>  
    </div> 
</div> 

CSS：

body { 
    margin: 10px; 
} 

.third{ 
    position:relative; 
} 

.test{ 
    position: absolute; 
    top:10px; 
    left:-15px; 
}