Html Can'；不要让导航栏正常工作

有人能给我解释一下为什么社交网络图标不对齐吗？我也不能更改CSS中的.100和.word类。我试图用两种不同的风格来塑造navbar品牌“100”与一种风格和“文字”与另一种风格。以下是JSFIDLE：

---

谢谢大家!

导航栏标题没有100%宽度，请尝试：

 <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header col-xs-12">

我用叉子叉了它：

---

社交网络链接确实向右对齐，但社交网络的容器没有拉伸100%，因此它们位于容器拉伸的右侧

您只需要添加以下内容：

.navbar头{width:100%；}

，在这里，我更新了您的JSFIDLE:）

添加此类

.navbar-header{width:100%}

---

这是的

.navbar标题

附带了一个媒体查询，当视口宽度大于768px时，该查询会将其向左浮动

@media (min-width: 768px)
  .navbar-header {
    float: left;
}

---

如上所述，将

.navbar标题
宽度设置为100%将解决此问题，或者您可以覆盖该媒体查询。
将
放在
的正后方：

<div class="navbar-header">
    <a class="navbar-brand" href="#"><h1><span class="hundred">100</span><span class="word">words</span></h1></a>
</div>
<ul class="nav navbar-nav navbar-right social">
    ....
</ul>   



....


不清楚您想用
.100
和
.word
做什么。可能你需要将
display:inline block
附加到这两个类中，然后使用
填充
，并且那里不需要
。
我想以不同的方式设置“100”和“words”。我使用navbar品牌并试图将其一分为二是错误的吗？@rdvl0
。nvabar标题应与菜单分开，如图所示
<div class="navbar-header">
    <a class="navbar-brand" href="#"><h1><span class="hundred">100</span><span class="word">words</span></h1></a>
</div>
<ul class="nav navbar-nav navbar-right social">
    ....
</ul>