Question

我正在学习网页设计，并且正在使用flex为我的网站创建响应式布局。由于某种原因，我的容器div在左侧和右侧都创建了一种白色边距，我不知道如何删除它，因此内容占据了宽度的100％。这是一个js小提琴来说明它。

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="navigation">
    <h1><a href="index.html">Blah Blah</a></h1> <!-- Logo in theory-->
    <a class="nav" id="push" href="#">Contact</a>
    <a class="nav" href="#">Log In</a>
    <a class="nav" href="#">Sign Up</a>
  </div>

  <div class="main">
    <h1>
      Blah blah
    </h1>
  </div>

  <div class="footer">
  </div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
}

.container {
    min-height: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: column;
}

.main {
    flex-grow: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

}

.navigation .main .footer {
    flex-shrink: 0;
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 14vh;
    background-color: black;
    opacity: 0.9;
    color: white;
}

.navigation {
    display: flex;
    justify-content: flex-end;
    background-color: black;
    opacity: 0.9;
    padding: 0.7em;
    color: white;
}

Answer 1

您正在使用引导程序，因此要依赖boostrap类（https://getbootstrap.com/docs/4.2/utilities/）

.footer {
  height: 14vh;
  background-color: black;
  opacity: 0.9;
  color: white;
}

.navigation {
  background-color: black;
  opacity: 0.9;
  padding: 0.7em;
  color: white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="d-flex vh-100 flex-column">
  <div class="navigation d-flex justify-content-end">
    <h1><a href="index.html">Blah Blah</a></h1>
    <!-- Logo in theory-->
    <a class="nav" id="push" href="#">Contact</a>
    <a class="nav" href="#">Log In</a>
    <a class="nav" href="#">Sign Up</a>
  </div>

  <div class="main flex-grow-1 d-flex flex-column align-items-center justify-content-center">
    <h1>
      Blah blah
    </h1>
  </div>

  <div class="footer d-flex align-items-center justify-content-center">
  </div>
</div>

Answer 2

如果您向容器添加额外的no-padding类，则可以添加：-

.no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

它不会影响您网站上的任何其他容器。

请参阅下面的完整示例。

html, body {
    height: 100%;
    width: 100%;
}

.container {
    min-height: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: column;
}

.no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.main {
    flex-grow: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

}

.navigation .main .footer {
    flex-shrink: 0;
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 14vh;
    background-color: black;
    opacity: 0.9;
    color: white;
}

.navigation {
    display: flex;
    justify-content: flex-end;
    background-color: black;
    opacity: 0.9;
    padding: 0.7em;
    color: white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container no-padding">
  <div class="navigation">
    <h1><a href="index.html">Blah Blah</a></h1> <!-- Logo in theory-->
    <a class="nav" id="push" href="#">Contact</a>
    <a class="nav" href="#">Log In</a>
    <a class="nav" href="#">Sign Up</a>
  </div>

  <div class="main">
    <h1>
      Blah blah
    </h1>
  </div>

  <div class="footer">
  </div>
</div>

如何删除我的HTML页面两边的空白

2 个答案: