Question

我很满意我的品牌，但我希望我的关于，画廊和图标向右移动更多。正如你所看到的，在“信封”图标的末尾有一个很大的差距，我甚至会喜欢它，就像我的品牌/头像一样。

我尝试在引导代码中执行ml-auto，mr-auto，但没有任何效果。

html {
  box-sizing: border-box;
}

*,
*: before,
*: after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}

body {
  background-image: url();
  width: 100%;
  height: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
  font-family: "Quicksand";
  font-size: 1.2em;
  line-height: 1.375em;
  padding: 0;
  margin: 0;
  background-color: #2F3A3B;
  -webkit-font-smoothing: antialiased;
}

.avatar {
  height: 3em;
  width: 3em;
  margin-top: -8px;
  border-radius: 5.0em;
  margin-right: 1em;
  margin-left: -5em;
  margin-bottom: -8px
}

nav ul li {}

@media screen and (min-width: 640px) {}

@media screen and (min-width: 960px) {}

main {
  flex: 1;
}

.intro {
  display: inline-block;
  width: 100%;
  padding: 90px 0 120px;
  background-color: #2A2332;
  background-size: cover;
  font-size: 1.9em;
  text-align: center;
  color: #FFF;
}

h1 {
  font-weight: medium;
  text-shadow: 5px 5px 10px black;
}

h4 {}

<!DOCTYPE html>
<html>

<head>
  <title>Home</title>
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="home.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

</head>

<body>

  <!--navbar-->
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <div class="container" style="
         
          margin-left: 100px;">
      <a class="navbar-brand" href="home.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Munoz Designs</a>

      <!--Toggle Button-->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span></button>

      <!--Navbar links-->
      <div class="collapse navbar-collapse" style="margin-left: ;" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <li class="nav-item">
              <a class="nav-link" href="about.html">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="gallery.html">Gallery</a>
            </li>

            <!--Social Media Icons-->
            <li class="nav-item">
              <a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>

              <li class="nav-item">
                <a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>

                <li class="nav-item">
                  <a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>

                  <li class="nav-item">
                    <a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>

                    <li class="nav-item">
                      <a class="nav-link" href="contact.html" title="Email" target="_blank">
                        <i class="fa fa-envelope-o" aria-hidden="true"></i></a>
        </ul>
      </div>
    </div>
  </nav>

  <div class="intro">
    <h1>Hi, I'm Eddie.</h1>
    <h4>I'm a character artist.</h4>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>

</html>

Answer 1

我认为您需要全宽 navbar ，因此请移除 container div，根据您的要求，这是不必要的。

此外，您还必须更改 navbar-brand 的CSS。

<强> Reference Link

Stack Snippet

body {
  background-image: url();
  width: 100%;
  height: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
  font-family: "Quicksand";
  font-size: 1.2em;
  line-height: 1.375em;
  padding: 0;
  margin: 0;
  background-color: #2F3A3B;
  -webkit-font-smoothing: antialiased;
}

.avatar {
  height: 3em;
  width: 3em;
  margin-top: -8px;
  border-radius: 5.0em;
}

nav ul li {}

@media screen and (min-width: 640px) {}

@media screen and (min-width: 960px) {}

main {
  flex: 1;
}

.intro {
  display: inline-block;
  width: 100%;
  padding: 90px 0 120px;
  background-color: #2A2332;
  background-size: cover;
  font-size: 1.9em;
  text-align: center;
  color: #FFF;
}

h1 {
  font-weight: medium;
  text-shadow: 5px 5px 10px black;
}

h4 {}

<!DOCTYPE html>
<html>

<head>
  <title>Home</title>
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

</head>

<body>

  <!--navbar-->
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <a class="navbar-brand" href="home.html"><img class="avatar" src="http://via.placeholder.com/50x50" alt>Munoz Designs</a>

    <!--Toggle Button-->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span></button>

    <!--Navbar links-->
    <div class="collapse navbar-collapse" style="margin-left: ;" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <li class="nav-item">
            <a class="nav-link" href="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="gallery.html">Gallery</a>
          </li>

          <!--Social Media Icons-->
          <li class="nav-item">
            <a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>

            <li class="nav-item">
              <a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>

              <li class="nav-item">
                <a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>

                <li class="nav-item">
                  <a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>

                  <li class="nav-item">
                    <a class="nav-link" href="contact.html" title="Email" target="_blank">
                      <i class="fa fa-envelope-o" aria-hidden="true"></i></a>
      </ul>
    </div>
  </nav>

  <div class="intro">
    <h1>Hi, I'm Eddie.</h1>
    <h4>I'm a character artist.</h4>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Bootstrap Navbar Brand左侧，右侧/右侧画廊

1 个答案: