bootstrap 영향을 받아 화면이 무너집니다.
본문
bootstrap 버전에 따라 박스가 무너집니다.
<link rel="stylesheet" href="./inc/bootstrap.css"> 를 적용하면
상단 메뉴 박스가 무너지고 노란 상자는 정상으로 보입니다.
반대로
<!-- link rel="stylesheet" href="./inc/bootstrap.css" --> 주석처리하면
상단 메뉴바는 정상으로 한줄메뉴가 표현되고 아래 노란 박스가 무너집니다.
아래는 해당 css입니다.
<!-- link rel="stylesheet" href="./inc/bootstrap.css" --> 주석처리한 상태에서
아래 CSS를 수정하여 속성이 안 무너지게 표현할 수 없을까요?
nav { z-index: 999; }
nav.drop-down {
background-color: #FFC650;
text-align: center;
top: -100vh;
left: 0;
height: 100vh;
width: 100vw;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
flex-wrow: column;
}
table { max-width: 430px; width: 430px; font-size: 12px; }
span.keyword { font-size: 18px; }
div.loader { top: 40%; left: 550px; margin: auto; display: block; }
.button-reload { cursor: pointer; }
.progress_bar { height: 3px; }
.bidclass { width: 40px; }
.bidname { max-width: 430px; width: 430px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price { width: 90px; }
.contracttype { max-width: 200px; width: 200px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enddate { width: 140px; }
.demandorg { max-width: 180px; width: 180px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
div[id^='pagination_'] { height: 35px; }답변 1
감사합니다.
여러 모드로 적용 해 보았지만 해결이 어렵네요.
위 선택자 경우, 아이디 지정 없이 요소와 클래스만으로 정의해서 우선순위가 밀려서 그래요.
해당 요소들을 div 등으로 감싼 후, id를 부여하세요.
그런 다음, 그 아이디의 서브 형식으로 스타일을 정의해 보세요.
<style>
#hz nav { ... }
...
#hz table { ....}
</style>
<div id="hz">
기존 코드
</div>
PS.
부트스트랩 사용하시면, BS 문법으로 코드를 짜보시는 것도 방법이겠죠.
사용하시는 BS 버전 매뉴얼 참고해 작업해 보세요.
https://getbootstrap.com/docs/versions/
bootstrap.css 소스 일부를 style.css 에 붙여넣어 해결 했습니다.
감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
