Bootstrap col 固定位置 [英] Bootstrap col fixed position

问题描述

如何修复 Bootstrap 列.

我这样试过，但它不起作用:

<div class="col-md-6">内容在这里...</div><div class="col-md-6" style=" position: fixed">内容在这里...</div>

fixed 位置使 col 成为绝对位置.

当页面从顶部 400 像素向下滚动时，如何禁用固定位置.

解决方案

使用媒体查询仅应用特定屏幕宽度上方的固定位置.例如 768px 是 Bootstrap 4 md 断点:

CSS(min-height 是可选的):

@media(最小宽度:768px){.固定位置{宽度:50%；左边距:50%；最小高度:100%；位置:固定；}}

然后，在这样的布局中使用 fixed-posi...

 
<div class="col-md-6">内容在这里...
<div class="col-md-6 fixed-posi">内容在这里......(固定位置)

演示:https://www.codeply.com/go/751CygARyO>

类似问题(左侧固定 DIV):如何在 Bootstrap 4 中固定左列并向右滚动，响应式?

How can I fix Bootstrap col.

I tried like this but it is not working:

<div class="row">
    <div class="col-md-6">Content goes here...</div> 
    <div class="col-md-6" style=" position: fixed">Content goes here...</div> 
</div>

fixed position makes col as absolute position.

And how can I disable a fixed position, when the page is scrolled down from top 400px.

解决方案

Use media query to only apply the fixed position above a specific screen width. For example 768px is the Bootstrap 4 md breakpoint:

CSS (min-height is optional):

@media (min-width: 768px) {
    .fixed-posi {
        width: 50%;
        margin-left: 50%;
        min-height:100%;
        position:fixed;
    }
}

Then, use fixed-posi in the layout like this...

   <div class="row">
        <div class="col-md-6">
           Content goes here...
        </div>
        <div class="col-md-6 fixed-posi">Content goes here... (fixed position)
        </div>
   </div>

Demo: https://www.codeply.com/go/751CygARyO

Similar question (fixed DIV on left): How to left column fixed and right scrollable in Bootstrap 4, responsive?

这篇关于Bootstrap col 固定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！