Twitter的引导3布局问题

我全新的自举3，我试图实现一个头，看起来像以下：Twitter的引导3布局问题

正如你可以看到这里有几个部分组成：

Logo;左对齐
菜单项的徽标右侧
在右上角的一天（MOTD）
“嗨，用户名！”，右对齐
“信封”的消息Glyphicon的用户名左侧
“心” 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>元素。任何想法，我要去哪里错误？

来源

2015-10-13 smeeb

U可以从这里开始，他们提供了很多关于bootstrap的文档http://getbootstrap.com/components/ – Lozeputten

你可以使用这个标记，并根据你的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>

来源

2015-10-13 17:34:33 Arun

将类“navbar-collapse”放在带有id属性“navbar”的div中的类“in”后面。使用“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>

来源

2015-10-13 17:43:16

好吧，我在更小的设备作为东西“SCOOT运行越来越下降投票这里的风险，但是从设计的角度来看，你可以在导航栏的“每日新闻”遇到问题，尤其是当在”。

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

<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项目的导航栏中即可。如果你愿意，你可以添加这些gliph作为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>

这将让一切漂亮整洁，而且你会不会碰上小屏幕的问题。

来源

2015-10-13 18:41:02

@smeeb，你是否设法把它整理出来？ –

澄清...按照我建议的方式，您可以确保您的顶栏和成员栏与您的导航栏颜色相同。从导航栏/导航栏删除任何边框或边距将使其看起来像一个导航栏。不同之处在于，一旦菜单缩小，强制进入手风琴风格，您就不会在手机上丢失报价或会员图标/名称。这样，如果您希望您的图标在将来的任何时候显示通知，警报img将不会隐藏在手风琴中。 –

Twitter的引导3布局问题

回答

相关问题