Question

在600像素处，我的flexbox变成了一列。第二个框中的列表未在较小的屏幕尺寸上正确居中。我已经尝试在媒体查询内外添加边距和填充。它坐得太远了。当我调整宽度时，它似乎粘在左侧。我该如何解决这个问题？

/* FLEXBOX */

.flexbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.box {
  padding: 5px;
}


/* Table and Cell for Vertical Alignment */

.table {
  display: table;
}

.cell {
  display: table-cell;
  vertical-align: middle;
}


/* SHOWCASE  */

#showcase {
  background-color: #1d2120;
  height: 100vh;
  width: 100%;
  display: table;
}

#showcase h1 {
  padding-top: 0px;
  font-family: Ubuntu;
  font-size: 4em;
  color: #da5d61;
}

#showcase h2 {
  color: #bcd5d1;
  font -family: Cairo;
  font-size: 2em;
  margin: 0 0 20px;
}

#showcase h3 {
  color: #ba9077;
  font-family: Cairo;
  font-size: 1em;
}

#inline {
  font-size: 3em;
}

#inline li {
  font-size: 1.5em;
  padding: 0 10px 0 10px;
}

@media screen and (max-width: 600px) {
  .flexbox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
  }
  #contact .container {
    width: 60%;
  }
}

@media screen and (max-width: 610px) {
  .flexbox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
  }
  #contact .container {
    width: 60%;
  }
}

<!-- SHOWCASE -->
<header id="showcase">
  <div class="cell">
    <div class="flexbox">

      <div class="box text-center">
        <h1 class="text animated pulse">Ellis Smith</h1>
        <h2><i class="fa fa-pencil" aria-hidden="true"></i> Copywriter</h2>
        <h3>Quality copy, never copied.</h3>
      </div>
      <!-- /box -->

      <nav class="box">
        <ul>
          <li>
            <a href="#services">Services</a></li>
          <li>
            <a href="#testimonials-placeholder">Testimonials</a>
            <li>
              <a href="#contact">Contact</a></li>
        </ul>
      </nav>
      <!-- /box -->
    </div>
    <!-- /flexbox -->
  </div>
  <!-- /cell -->
</header>
<!-- /showcase -->

<!--/END SHOWCASE -->

Answer 1

要在Bootstrap 4中处理此问题，您只需创建一个行 - 列对并将您的内容放在列中。

如果您只有一个要集中的列表，那么我建议您使用该列的col-auto类（它会自动更改列的宽度以适合内容），然后添加类{{ 1}}（边距水平自动）到那个。这将使专栏居中。

以下是该代码段（注意：该代码段假定您将整个内容放入Bootstrap mx-auto或.container）：

.container-fluid

在较小的屏幕尺寸上，列表不以Flexbox为中心

1 个答案: