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>

现在，如果我绝对定位＃navigation-buttons，并且在调整浏览器大小时，响应能力不起作用。

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%);
    }

P.S：＃粒子-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;
}

绝对定位元素的Bootstrap响应

1 个答案: