Question

我创建了一个具有响应式设计的产品组合页面。在整个页面上看起来很棒，在Surface或iPad或手机等小屏幕上，质量很差。导航栏中的链接会偏离中心以及其他一些问题。 CodePen链接如下所示。提前谢谢。

CodePen：http://codepen.io/A-Jordan/pen/yOKNVe/

HTML：

 <html>

<head>
  <title>Portfolio Page</title>
</head>

<body>

  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <ul class="nav navbar-nav">
        <div class="row">
          <div class="about">
            <div class="col-md-4">
              <li><a href="#about">About</a>
              </li>
            </div>
          </div>
          <div class="portfolio">
            <div class="col-md-4">
              <li><a href="#portfolio">Portfolio</a>
              </li>
            </div>
          </div>
          <div class="contact">
            <div class="col-md-4">
              <li><a href="#contact">Contact</a>
              </li>
            </div>
          </div>
        </div>
      </ul>
    </div>
  </nav>

  <div class="div-1">
    <div class="row">
      <div class="col-md-6">
        <img class="my-picture" src="http://s20.postimg.org/vo5nz85kt/my_face.jpg" alt="My face">
      </div>
      <div class="col-md-6">
        <p> Hello! My name is Anthony Jordan, I am a Web Developer. I enjoy learnoing HTML, CSS, JavaScript & jQuery. I love bringing something to life. Please enjoy my portfolio; there is more to come. </p>
      </div>
    </div>


    <div class="div-2">
      <h2 id="portfolio">Portfolio</h2>
      <div class="row">
        <div class="col-md-4 ">
          <img class="img-responsive" src="http://s20.postimg.org/wswgpg4zh/Tennis_Game_New.png" alt="Classic Tennis">
        </div>
        <div class="col-md-4 ">
          <img class="img-responsive" src="http://s20.postimg.org/rv8sa3qd9/Break_Game_Clone_screenshot.png" alt="Brick Destoryer">
        </div>

        <div class="col-md-4 ">
          <img class="img-responsive" src="http://s20.postimg.org/6627zhpod/Tribute_Page.jpg" alt="Tribute Page">
        </div>
      </div>
    </div>

    <div class="div-4">
      <div class="row">
        <div class="col-md-4 ">
          <img class="img-responsive" src="https://placeimg.com/640/480/tech/grayscale" alt="Placeholder">
        </div>
        <div class="col-md-4 ">
          <img class="img-responsive" src="https://placeimg.com/640/480/arch/grayscale" alt="Placeholder">
        </div>

        <div class="col-md-4 ">
          <img class="img-responsive" src="https://placeimg.com/640/480/nature/grayscale" alt="Placeholder">
        </div>
      </div>
    </div>

    <hr>
    <div class="div-3">
      <div class="row">
        <h2 id="contact">Contact Me</h2>
        <div class="col-md-8">
          <p class="p-2"> If you would like to get in touch with me, all I need is your name and email, and I will be more than happy to reach out to you. Thank you.</p>
        </div>
        <div class="col-md-4 ">
          <img class=" ph-1 img-responsive" src="https://placeimg.com/320/240/people/grayscale" alt="Placeholder">
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <form role="form">
            <div class="form-group">
              <label for="email">Email Address:</label>
              <input type="email" class="form-control" id="email">
            </div>
        </div>
        <div class="col-md-4">
          <div class="form-group">
            <label for="name">Name:</label>
            <input type="name" class="form-control" id="name">
          </div>
          </iv>
          </form>

        </div>
      </div>
      <nav class=" nav-2 navbar navbar-default navbar-fixed-bottom">
        <div class="container-fluid">
          <ul class="nav navbar-nav">
            <div class="row">
              <div class="button-1">
                <div class="col-md-4">
                  <li><a target="_blank" href="https://github.com/A-Jordan">GitHub</a>
                  </li>
                </div>
              </div>
              <div class="button-2">
                <div class="col-md-4">
                  <li><a target="_blank" href="https://www.linkedin.com/in/akjordan">LinkedIn</a>
                  </li>
                </div>
              </div>
              <div class="button-3">
                <div class="col-md-4">
                  <li><a target="_blank" href="https://twitter.com/Brotesque">Twitter</a>
                  </li>
                </div>
              </div>
            </div>
          </ul>
      </nav>
  </body>
</html>

CSS：

.about {
  margin-left: 600px;
}

body {
  background-color: #8c8c8c;
  color: black;
  margin-left: 220px;
  margin-right: 220px;
}

.button-1 {
  margin-left: 600px;
}

.button-2 {
  margin-left: 700px;
}

.button-3 {
  margin-left: 800px;
}

.contact {
  margin-left: 800px;
}

.div-1 {
  background-color: #b3b3b3;
}

.div-2 {
  background-color: #d9d9d9;
}

.div-3 {
  background-color: #d9d9d9;
  margin-bottom: 100px;
}

.div-4 {
  background-color: #d9d9d9;
  margin-top: 50px;
}

.form-group {
  color: black;
}

h1 {
  margin-left: 1050px;
}

h2 {
  text-align: center;
}

p {
  color: black;
  font-size: 20px;
  margin-right: 220px;
  margin-top: 65px;
  float: justify;
}

.p-2 {
  float: justify;
  font-size: 20px;
  margin-bottom: 50px;
  margin-left: 40px;
}

.ph-1 {
  margin-right: 50px;
}

.portfolio {
  margin-left: 700px;
}

.my-picture {
  max-width: 50%;
  -webkit-border-radius: 10%;
  -moz-border-radius: 45%;
  border-radius: 45%;
  margin-left: 145px;
}

.nav-2 {
  margin-left: 220px;
  margin-right: 220px;
}

Answer 1

看起来你是bootstrap的新手。我可以看到您使用 margin-left 用于导航栏，并且您还使用了 col-md-4 。在使用RWD（响应式网页设计）时，我建议您使用 bootstrap navbar 的教程。 Bootstrap框架提供了许多有用的类，您可以使用它们来设置标记样式。在这里，你可以使用 navbar-right 而不是给予margin-left。请浏览bootstrap navbar教程以获得响应式菜单。您还可以通过一次应用多个网格类来使您的投资组合完全响应，以获得不同的屏幕分辨率，例如 col-lg-3 col-md-4 col-sm-6 col-xs-12 。您可以根据屏幕分辨率一起使用所有这些类来设置标记样式。请访问下面给出的链接，它将为您提供更多指导。 Bootstrap Navbar

祝你好运

网站在大型视口上看起来很好，但质量较差的屏幕

1 个答案: