홈>
html/css를 처음 사용하며 포트폴리오 웹 페이지를 구축하려고합니다. 이미지에 표시된 두 개의 컨테이너가 있으며 배경색을 변경할 때 측면의 공간을 제거하고 싶습니다. 패딩과 여백을 쓸데없이 엉망으로 만들려고했습니다.
이 문제를 해결하는 방법에 대한 아이디어가 있습니까?
html,
body {
font-family: ;
margin: 0 auto;
text-transform: lowercase;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 !important;
}
.nav {
float: right;
display: inline;
margin: 0 auto;
list-style: none;
}
.nav li {
list-style: none;
display: inline;
padding-top: 0;
padding-left: 10px;
}
.nav>li>a {
padding: 0px !important;
color: black;
}
a:hover {
background-color: yellow;
}
.header {
width: 100%;
display: inline-block;
padding: 10px 0 0 0;
margin: 0 auto;
}
.header h1 {
font-size: 20px;
margin: 0 auto;
display: inline-block;
}
.header .nav {
padding-left: 10px;
}
.supporting h1 {
border-left: 1px solid black;
padding: 10px;
margin: 0 auto;
display: inline-block;
position: absolute;
top: 25%;
}
.supporting .container {
background-color: white;
height: 500px;
width: 100%;
}
.work .container {
height: 500px;
margin: 0 auto;
background: rgba(225, 225, 225, .8)
}
<html>
<head>
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="header">
<h1 class="logo">header</h1>
<ul class="nav nav-pills">
<li>
<a href="#">Projects</a>
</li>
<li>
<a href="#">Photography</a>
</li>
<li>
<a href="#">blog</a>
</li>
</ul>
</div>
<div class="supporting">
<div class="container">
<h1>hi.</h1>
</div>
</div>
<div class="work">
<div class="container">
<h1>work</h1>
</div>
</div>
- 답변 # 1
- 답변 # 2
컨테이너 유체에 대한 부트 스트랩 문서를 확인해야한다고 생각합니다. 이것이 전폭 컨테이너를 관리하는 부트 스트랩 방법입니다.
관련 자료
- swift - 사용자가 선택한 색상을 전체 IOS 앱의 배경색으로 설정하려면 어떻게합니까?
- html - 파란색 상단 표시 줄에 넣은 검색 컨테이너의 배경색을 설정하는 방법은 무엇입니까?
- visual studio - 전체 Crystal Report의 페이지 배경색 설정
- html 및 css - 컨테이너의 배경색을 변경할 수 없음
- html - 메인 컨테이너 배경색을 모든 요소를 감싸는 방법은 무엇입니까?
- html - 마우스를 가져 가면 메뉴 항목의 전체 너비가 배경색을 어떻게 변경합니까?
- python - tkinter GUI에서 클릭 할 때 버튼의 배경색을 변경하고 싶습니다
- javascript - 선택한 div onclick의 배경색이 작동하지 않습니까?
- Laravel Excel에서 행의 배경색을 설정하는 방법은 무엇입니까?
- java - 선택되지 않은 JList 항목의 배경색을 어떻게 변경합니까?
- flutter/dart의 ListView 항목에서 배경색을 변경하는 방법
- angular - 셀 값에서 후속 셀의 배경색을 변경하는 방법은 무엇입니까?
- ios - userDefaults로 사용자 정의 배경색 저장
- sass - 각도의 일부 조건에 따라 scss를 사용하여 레이아웃의 배경색과 색상을 변경하는 방법은 무엇입니까?
- html - 각도 탭의 배경색 변경
- html5 - 고정 된 배경 이미지는 적용되지 않지만 적용되지 않은 경우 수직으로 커버되지 않습니다
- css - 자동 완성 후 비활성화 된 입력 배경색 설정
- kendo UI mutiselect 각도에서 선택한 항목의 배경색 변경
- 각도를 사용하여 배경색을 변경하는 방법
- visual studio code - 편집기 배경 이외의 설정 창에 다른 배경색을 설정하는 방법
관련 질문
- javascript : iFrame의 요소가 Client-View에 있는지 감지
- javascript : 내 프로젝트에이 로더를 어떻게 구현할 수 있습니까?
- javascript : html /css 갤러리 div-줄에 텍스트를 표시하는 방법
- javascript : 부트 스트랩 팝 오버에 '닫기 버튼'삽입 [중복]
- javascript : 페이지를 계속하기 위해 DIV 내부를 스크롤 할 수는 없지만 휴대폰 본문의 외부에서만 가능합니다.
- javascript : AngularJs를 사용하여 Div 콘텐츠 인쇄
- javascript : IFrame의 srcdoc에있는 codemirror 편집기가 변경 될 때 IFrame mithril 요소에서 onchange 이벤트를 트리거하는 방법은 무엇입니까?
- javascript : html /js : 동일한 스크롤 위치에서 이전 페이지로 돌아 가기
- javascript : 축소판 이미지를 캡처하려고 할 때 변경 사항에 jquery가 아무것도하지 않음
- javascript : 다른 장치에서 애니메이션의 텍스트간에 전환하는 방법은 무엇입니까? html /css
.container
를 사용할 때 부트 스트랩은 특정width
를 제공합니다 . 거기에는 두 가지 선택이 있습니다 먼저.container-fluid
를 사용할 수 있습니다.container
대신 그러면 전체 너비 컨테이너가 만들어집니다 (패딩 만 제거하면됩니다).두 번째로
.container
를 포장하도록 선택할 수 있습니다.container-fluid
내부그리고 당신의
css
에서 당신은.container-fluid
에 배경색을 줘.container
하지 않기