Question

我是html / css的新手并且正在尝试构建投资组合网页。我有两个容器，如图所示，我想在更改背景颜色时摆脱侧面的空间。我试着弄乱填充和边距无济于事。

有关如何解决此问题的任何想法？

＆＃13;

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)
}

＆＃13;

<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>

＆＃13;

Answer 1

使用.container bootstrap时，会为其指定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;
}

Answer 2

我认为你应该查看关于container-fluid的bootstrap文档，这是管理全宽容器的引导方式。

如何获取容器的背景颜色以覆盖整个屏幕宽度？

2 个答案: