Question

我使用bootstrap制作了一个网站，我对这个框架了解不多。我遇到困难的是造型navbar。

我想要做的是移动名称，然后将三个标题，＆＃39;工作＆＃39;，＆＃39;关于＆＃39;和＆＃39;联系人＆＃39;转到左下角页面的，并将社交媒体图标移动到页面的右上角。有人可以告诉我如何在保留bootstrap提供的功能的同时做到这一点吗？

这是一个jsfiddle：https://jsfiddle.net/3kq7ptxd/

jsfiddle看起来与实际网站不同，所以如果你继续使用paulopinzon.com，你可能会更清楚地知道我在尝试什么。

感谢您抽出宝贵时间！我会尝试在同一时间尝试一些事情，但如果有更多经验的人可以提供帮助，那将非常感激。

度过美好的一天

HTML：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/yourCustom.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> 
<body>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
  <div class="container">
  <div class="navbar-header">
  <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>

  </button> <a href="index.html" class="navbar-brand" style="color:#000000">Paulo Pinzon-Iradian</a>

    </div>
    <div id="navbarCollapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="work.html" style="color:#000000; margin-left:1.5em;">Work</a>

        </li>
        <li><a href="about.html" style="color:#000000; margin-left:1.5em;">About</a>

        </li>
        <li><a href="contact.php" style="color:#000000; margin-left:1.5em;">Contact</a>

        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a target="_blank" href="https://www.facebook.com/pages/Paulo-Pinzon-Iradian/849542288428399" style="color:#3b5197;"><i class="fa fa-facebook-square"></i></a>
        </li>
        <li><a target="_blank" href="https://instagram.com/paulopinzonart/" style="color:#125688;"><i class="fa fa-instagram"></i></a>
        </li>
        <li><a target="_blank" href="https://twitter.com/PauloPinzonArt" style="color:#00c7f4;"><i class="fa fa-twitter-square"></i></a>
        </li>

      </ul>
    </div>
  </div>
</nav>

Answer 1

将导航栏.container更改为.container-fluid。

基本上.container-fluid会在更改视口时不断重新调整大小，并且在.container上不会在侧面留下额外的空白空间。

.container-fluid具有CSS属性宽度：100%;，因此它会在每个屏幕宽度粒度上不断重新调整。

<nav role="navigation" class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a href="index.html" class="navbar-brand" style="color:#000000">Paulo Pinzon-Iradian</a>

    </div>
    <div id="navbarCollapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="work.html" style="color:#000000; margin-left:1.5em;">Work</a>

        </li>
        <li><a href="about.html" style="color:#000000; margin-left:1.5em;">About</a>

        </li>
        <li><a href="contact.php" style="color:#000000; margin-left:1.5em;">Contact</a>

        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a target="_blank" href="https://www.facebook.com/pages/Paulo-Pinzon-Iradian/849542288428399" style="color:#3b5197;"><i class="fa fa-facebook-square"></i></a>
        </li>
        <li><a target="_blank" href="https://instagram.com/paulopinzonart/" style="color:#125688;"><i class="fa fa-instagram"></i></a>
        </li>
        <li><a target="_blank" href="https://twitter.com/PauloPinzonArt" style="color:#00c7f4;"><i class="fa fa-twitter-square"></i></a>
        </li>

      </ul>
    </div>
  </div>
</nav>

CODEPEN DEMO

Answer 2

尝试将以下代码添加到您的css样式中，做到了您想要的吗？

nav .container {
    margin: 0 auto;
    width: 100%;
}

Answer 3

这 <nav role="navigation" class="navbar navbar-default navbar-static-top"> <div class="container"> 到

<nav role="navigation" class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">

如何设置Bootstraps可折叠Navbar的样式？

3 个答案: