홈>2020-02-26 00:44

javascript - 화면의 전체 너비를 덮기 위해 컨테이너의 배경색을 얻는 방법은 무엇입니까?

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>

javascriptjqueryhtmlcss

답변 # 1
.container 를 사용할 때 부트 스트랩은 특정 width 를 제공합니다 . 거기에는 두 가지 선택이 있습니다 먼저 .container-fluid 를 사용할 수 있습니다 .container 대신 그러면 전체 너비 컨테이너가 만들어집니다 (패딩 만 제거하면됩니다).

두 번째로 .container 를 포장하도록 선택할 수 있습니다 .container-fluid 내부
```
<div class = "container-fluid">
    <div class ="container">
        content goes here
    </div>
</div>
```
그리고 당신의 css 에서 당신은 .container-fluid 에 배경색을 줘 .container 하지 않기
```
div.container-fluid{
    padding-left:0px;
    padding-right:0px;
    background-color:red;
}
```

답변 # 2
컨테이너 유체에 대한 부트 스트랩 문서를 확인해야한다고 생각합니다. 이것이 전폭 컨테이너를 관리하는 부트 스트랩 방법입니다.

Python2.net

javascript - 화면의 전체 너비를 덮기 위해 컨테이너의 배경색을 얻는 방법은 무엇입니까?

관련 자료