Question

我是Bootstrap 3的新手，我正在尝试实现如下所示的标题：

正如您所看到的，这里有几个组成部分：

标志;左对齐
徽标右侧的菜单项
右上方的消息（MOTD）
＆＃34; 嗨，用户名！＆＃34;，右对齐
＆＃34;包络＆＃34;用户名左侧的字形
＆＃34;心脏＆＃34;信封Glyphicon左侧的Glyphicon（上图中的它是一颗星，但它应该是一颗心）

这是我的jsFiddle代表我最好的尝试，这是该小提琴的主要<body>元素：

<!DOCTYPE html>
<html>
<head>
    <!-- Stuff goes here -->
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Logo</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Menu 1 | Menu 2 | Menu 3</a></li>
                    <li class="active"><a href="#">This is the message of the day up here!</a></li>
                    <li class="active"><a href="#"><span class="glyphicon glyphicon-heart"></span></a></li>
                    <li class="active"><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li>
                    <li class="active"><a href="#">Hi, smeeb!</a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>
</html>

当我在jsFiddle中运行时，没有任何正确的布局，我甚至无法看到大多数<li>元素。我知道我在哪里出错了吗？

Answer 1

将div中的类“navbar-collapse”放入div中，并使用id属性“navbar”。使用“in”类，您的导航栏将开始显示。

<!DOCTYPE html>
<html>
<head>
    <!-- Stuff goes here -->
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Logo</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse in">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Menu 1 | Menu 2 | Menu 3</a></li>
                    <li class="active"><a href="#">This is the message of the day up here!</a></li>
                    <li class="active"><a href="#"><span class="glyphicon glyphicon-heart"></span></a></li>
                    <li class="active"><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li>
                    <li class="active"><a href="#">Hi, smeeb!</a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>
</html>

Answer 2

您可以使用此标记并根据您的CSS设置样式。将菜单设置为左侧，将其他名称和图标设置为右侧菜单。然后将顶部消息分开并将其绝对定位到相对于父导航栏。

<div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
              <li class="active"><a href="#">Menu 1 </a></li>
              <li class="active"><a href="#">Menu 2</a></li>
              <li class="active"><a href="#">Menu </a></li>           
          </ul>
          <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-heart"></span></a></li>
              <li class="active"><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li>
              <li class="active"><a href="#">Hi, smeeb!</a></li>
          </ul>
      </div>
      <div><a href="#">This is the message of the day up here!</a></div>

Answer 3

好吧，我冒着在这里投票的风险，但从设计的角度来看，你可能会遇到导航栏中“当天的引用”的问题，特别是在较小的设备上，因为“scoot in”。 / p>

我可以建议在导航仪正上方有一个顶栏吗？

<div class="top-bar-wrap">
     <div class="container">
         <div class="top-bar">
            <div class="pull-right"> <!-- This will keep your quote to the right. Just change it to pull-left if if you want it to start from the left. -->
               <p>Quote of the day</p>
            </div>
         </div>
     </div>
</div>

然后，您将被释放，在链接旁边显示导航和图标。只需确保将“navbar-right”添加到包含li项目的导航栏。你可以根据需要添加这些gliphs作为li项目，或者你可以在你的CSS中使用 - display：inline - 属性添加它们，这应该可行。虽然，我可以再建议一件事吗？

作为设计师首先来到开发的黑暗面...显示用户名的图标和代码也可能最好在导航下方的栏中提供。您可以复制“顶栏”部分的代码并将其放在导航栏下面。

/* For the topbar above the nav */
.top-bar-wrap {
  padding: 6px 0;
  background-color: #333; }

.top-bar {
  min-height: 20px;
  line-height: 20px; }

/* For the bar just below the nav "Member-bar" */
.member-bar-wrap {
  padding: 6px 0;
  background-color: #333; }

.member-bar {
  min-height: 20px;
  line-height: 20px; }

<div class="member-bar-wrap">
   <div class="container">
       <div class="member-bar">
          <div class="pull-right">
           
            <!-- Gliphs and code for your member name display -->
            
          </div>
       </div>
   </div>
</div>

这样可以保持一切美观整洁......而且你不会遇到小屏幕的问题。

Twitter Bootstrap 3布局问题

3 个答案: