설정 사이드 바가 맞지 않습니다.

페이지 내용이 흐르는 브라우저의 양쪽에 정적 줄무늬를 만들려고합니다. 부트 스트랩을 사용하고 있습니다. 저는 정적 인 내용을 위해 왼쪽에 하나의 셀과 오른쪽에 하나의 셀을 사용했습니다. 이 셀에는 페이지를 따라 가면서 컨테이너 셀의 너비가 50 % 인 다른 셀이 있습니다. 다음과 같이설정 사이드 바가 맞지 않습니다.

내 코드는 다음과 같습니다

왼쪽 측면은 OK입니다 :

<div class="col-lg-1 col-md-1 col-sm-1"> 
     <div style="background-image: url(./Content/images/strip_left.jpg); background-repeat: repeat-y; width: 20%; float: left; min-height:100%; position:fixed; top:0px; bottom:0px;">&nbsp;</div> 
    </div> 
<div class="col-lg-4 col-md-6 col-sm-8 col-lg-offset-3 col-md-offset-2 col-sm-offset-1"> 
    <!-- This is where the page content flows --> 
</div> 
<div class="col-lg-1 col-md-1 col-sm-1" style="float:right; margin:0px; right:0px; text-align:right;"> 
     <div style="background-image: url(./Content/images/strip_right.jpg); background-repeat: repeat-y; width: 20%; float: right; min-height:100%; position:fixed; top:0px; bottom:0px;">&nbsp;</div> 
</div>

문제는 나는 다음과 같은 얻고 있다는 것입니다. 그러나 나는 오른쪽의 차이를 좁히지 못했습니다. 부동, 여백, 패딩이 작동하지 않았습니다. 이 문제를 어떻게 해결할 수 있습니까?

P. : 녹색 영역은 왼쪽 및 오른쪽 div입니다. 노란색 영역이 컨텐츠 영역입니다. 흰색 영역은 여기에 배경 이미지를 스트라이프로 설정합니다.

출처

2017-12-13 user3021830

float/alignment에 인라인 CSS 대신 pull-right 및 pull-left Bootstrap 클래스 사용을 고려하십시오. – jcruz

플로트 및 고정 위치를 사용하여 문제가 발생한다고 생각합니다. https://jsfiddle.net/ro5hvwub/2

이 당신이 찾고있는 무엇인가 :

position: fixed; /* use this only if you want the element fixed positioned in relation to the window */

여기에 단순화 된 바이올린이야?

출처

2017-12-13 15:48:37 jcruz

설정 사이드 바가 맞지 않습니다.

답변

관련 문제