Question

我正在努力完成我的投资组合页面。在24英寸和13英寸上有一个问题让顶部/底部填充间距保持不变。正如你从下面的图片中看到的那样，24英寸目前看起来我想要它，右边的所有元素都直接在中间。当它变成13“时，间距关闭，元素不是居中。我该如何解决这个问题？

24“ - http://i988.photobucket.com/albums/af6/jtbitt/jay-portfolio-24-inch-spacing_zpsenaqpzp4.png

13“ - http://i988.photobucket.com/albums/af6/jtbitt/jay-portfolio-13-inch-spacing_zps45ygidew.png

HTML FRONT PAGE -

<body ng-app="jayPortfolio">

  <!-- NAVBAR -->
  <header>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a class="navbar-brand" href="/">JAY BITTNER</a>
        </div>

        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="/">ABOUT</a></li>
            <li><a href="/portfolio">PORTFOLIO</a></li>
            <li><a href="/experience">EXPERIENCE</a></li>
            <li><a href="/contact">CONTACT</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <!-- LOAD OTHER PAGES HERE -->
  <main>
    <div id='ng-view' ng-view></div>
  </main>
</body>

HTML FRONT PAGE PARTIAL -

<section id="about" ng-controller="aboutController">    

  <div class="container-fluid">

    <div class="row">

      <div class="about-left col-lg-6 col-md-6 col-sm-12 col-xs-12">
      </div>

      <div class="about-right col-lg-6 col-md-6 col-sm-12 col-xs-12">

        <div class="about-content">

          <div class="about-content-title">
            <h1><strong>I'M JAY.</strong></h1>
          </div>

          <br />

          <div class="about-content-info" ng-model="about.firstParagraph">
            <p ng-if="about.firstParagraph"><strong>An entrepenurial minded, Full Stack Developer. Whenever I'm up against a challenge that I care about, it gives me a rush. Focusing on the big picture is important to me, but I never forget the smaller details. Anything that is not challenging is boring, and makes me yawn. Anything that is seemingly impossible interests me a lot. I'm ready to get to work.</strong></p>

            <p ng-if="!about.firstParagraph"><strong>Currently seeking a Javascript position, using the MEAN stack, in New York City. Being innovative, ambitious, and hard working are values that are very important to me. I want to join a company that has similar values and has goals of reaching ridiculous levels of success, not just modest realistic ones. I love working with a solid team.</strong></p>
          </div>

          <br />

          <div class="about-button">
            <button ng-if="about.firstParagraph" class="label label-success" ng-click="about.switchParagraph()"><strong>MORE =></strong></button>
            <button ng-if="!about.firstParagraph" class="label label-success"><a href="/portfolio"><strong>VIEW PORTFOLIO</strong></a>
          </div>

          <br />

          <div class="about-personal-info">
            <h4><strong>Email: jaybittner@gmail.com</strong></h4>
            <br />
            <div class="about-icon" ng-repeat="profile in about.profiles">
              <a href="{{ profile.url }}"><img src="{{ profile.icon }}" /></a>
            </div>
          </div>

        </div>

      </div>

    </div>

  </div>

</section>

CSS -

#about {
  height: 100%; 
  width: 100%;
  background-image: -webkit-gradient(linear,left top,right bottom,color-stop(0.12, #061419),
color-stop(0.61, #36875F)
  );
  background-repeat: no-repeat;
}

#about .container-fluid, #about .container-fluid .row {
  height: 100%;
  width: 100%;
}

.about-left {
  height: 100%;
  background-image: url('../../images/jay-ocean.jpg'); 
  background-repeat: no-repeat;
  background-position: 0 100%;
  border-right: 3px solid black;
}

.about-right {
  width: 50%;
  height: 100%;
}

.about-content {
  width: 50%;
  height: 100%;
  margin: 0 auto;
  padding-top: 20%;
  padding-left: 5%;
  text-align: center;
}

.about-content-title h1{
  font-size: 3.4vw;
}

.about-content-info p {
  font-size: 1vw;
  word-spacing: 0.3vw;
}

.about-button button {
  color: gray;
  border: 1px solid black;
  background-color: black;
}

.about-button a {
  color: gray;
}

.about-personal-info h4 {
  font-size: 1vw;
  word-spacing: 0.3vw;
}

.about-icon {
  display: inline;
  word-spacing: 0.3vw;
}

.about-icon img {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid black;
}

Answer 1

当您的网页内容位于container时，您的问题似乎出现在导航栏中，其中有一个稳固的container-fluid。

我现在很难直接为您提供工作代码，但您的问题是navbar-brand的展示位置。您可以尝试将其居中或通过媒体查询中的padding或margin调整其位置。

为此，请将其放入CSS：

@media (max-width: 1199px)
{
   .navbar-brand {
      padding-left: 100px;
   }
}

媒体查询中的最大宽度计算屏幕视口，并根据屏幕上页面的确切宽度或高度更改网站的外观。

使用max-width: 1199px，当屏幕（或浏览器窗口）显示低于此宽度的页面时，此媒体查询会将此padding-left属性用于.navbar-brand。

您还可以解决此问题，以便与CSS中的min-width甚至height相关的视口设置一起使用。

如何让顶部/底部间距响应？

1 个答案: