Bootstrap Reaktionsfähigkeit für absolut positionierte Elemente

Question

Ich benutze Bootstrap 4, die auf Flexbox basiert. Was passiert nun, wenn ich eine der Säulen oder deren Unterteilungen absolut positioniere? Würden sie auf die Reaktionsfähigkeit reagieren oder nicht?

Beispiel:

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

Nun, wenn ich die # Navigationstasten absolut positionieren, und wenn der Browser das Ansprechverhalten der Größe verändert wird, wird nicht funktionieren.

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: # Partikel-js ist eine Leinwand

Answer 1

Sie müssen Eltern als Position machen: relative und jetzt jedes Kind, Sie machen Position absolut, wird es aufgestellt werden in Bezug auf seine Elternposition wie im Normalfall. Wenn die absolute Position geändert wird, ändert sich die Position nicht, dies hat nichts mit Reaktionsfähigkeit zu tun. Es verhält sich so, wie sich anderer Code bei der Verwendung von Bootstrap-Klassen verhält.

Bitte überprüfen Sie dies: 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; 
}