[css] 부트 스트랩에서 열 고정 위치 만들기

Program / 글쓴이

Bootstrap을 사용하면 다른 .col-lg-9가 정상 위치 (페이지를 스크롤 할 수 있음) 인 동안 위치 : 고정 된 위치에 배치하려는 그리드 열 class = “col-lg-3″이 있습니다.

<div class="row">
    <div class="col-lg-3">
        Fixed content
    </div>
    <div class="col-lg-9">
        Normal scrollable content
    </div>

</div>

LifeHacker.com 의 왼쪽 열과 같은 방식으로
왼쪽 부분이 고정되어 있지만 페이지를 스크롤합니다.

부트 스트랩 v3.1.1을 사용합니다.

답변

<div class="row">
    <div class="col-lg-3">
       <div class="affix">
           fixed position
        </div>
    </div>
    <div class="col-lg-9">
       Normal data enter code here
    </div>
</div>

답변

, 이하 브의 대답 반복 단지 사용 position:fixed및 부트 스트랩 col-offset당신이 폭에 구체적으로 할 필요가 없습니다.

<div class="row">
    <div class="col-lg-3" style="position:fixed">
        Fixed content
    </div>
    <div class="col-lg-9 col-lg-offset-3">
        Normal scrollable content
    </div>
</div>

답변

여기 http://jsfiddle.net/dRbe4/ 솔루션에 따라 ,

<div class="row">
    <div class="col-lg-3 fixed">
        Fixed content
    </div>
    <div class="col-lg-9 scrollit">
        Normal scrollable content
    </div>

 </div>

완벽하게 작동하도록 일부 CSS를 수정했습니다.

.fixed {
        position: fixed;
        width: 25%;
}
.scrollit {
        float: left;
        width: 71%
}

솔루션을 공유해 주신 @Lowkase에게 감사드립니다.

답변

Bootstrap 3에서는 class="affix"작동하지만 Bootstrap 4에서는 작동하지 않습니다. 나는 Bootstrap 4 에서이 문제를 해결했습니다 class="sticky-top"
( position: fixedCSS에서 사용 하면 자체 문제가 있습니다)

코드는 다음과 같습니다.

<div class="row">
    <div class="col-lg-3">
        <div class="sticky-top">
            Fixed content
        </div>
    </div>
    <div class="col-lg-9">
        Normal scrollable content
    </div>
</div>

답변

부트 스트랩 4 업데이트

이제 부트 스트랩 4에는 position-fixed이러한 목적을위한 클래스가 포함되어 있으므로 추가 CSS가 필요하지 않습니다.

<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="position-fixed">
                Fixed content
            </div>
        </div>
        <div class="col-lg-9">
            Normal scrollable content
        </div>
    </div>
</div>

https://www.codeply.com/go/yOF9csaptw

답변

이것을 사용하고 나를 위해 작동하며 작은 화면으로 문제를 해결하십시오.

<div class="row">
    <!-- (fixed content) JUST VISIBLE IN LG SCREEN -->
    <div class="col-lg-3 device-lg visible-lg">
       <div class="affix">
           fixed position
        </div>
    </div>
    <div class="col-lg-9">
    <!-- (fixed content) JUST VISIBLE IN NO LG SCREEN -->
    <div class="device-sm visible-sm device-xs visible-xs device-md visible-md ">
       <div>
           NO fixed position
        </div>
    </div>
       Normal data enter code here
    </div>
</div>

답변

부트 스트랩 4에서는 col-auto를 사용하십시오.

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-auto">
            Fixed content
        </div>
        <div class="col-sm">
            Normal scrollable content
        </div>
    </div>
</div>