Question

任何人都可以解释为什么社交网络图标不对齐吗？我也无法改变CSS中的.hundred和.word类。我试图用两种不同的风格设计导航栏品牌。＆＃39; 100＆＃39;风格和＆＃39;单词＆＃39;与另一个。这是jsfiddle：

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
  <div class="navbar-header">
    <a class="navbar-brand" href="#"><h1><span class="hundred">100</span><span class="word">words</span></h1></a>
    <ul class="nav navbar-nav navbar-right social">
      <li><a href="#"><i class="fa fa-2x fa-facebook hidden-xs"></i></a></li>
      <li><a href="#"><i class="fa fa-2x fa-twitter hidden-xs"></i></a></li>
      <li><a href="#"><i class="fa fa-2x fa-instagram hidden-xs"></i></a></li>
      <li><a href="#"><i class="fa fa-2x fa-pinterest hidden-xs"></i></a></li>
    </ul>
  </div>
</div>

谢谢！

Answer 1

你的navbar-header没有100％-width try：

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

我分叉了： https://jsfiddle.net/d0h9gp6w/

Answer 2

社交网络链接确实正确对齐，但社交网络的容器不会延伸100％，因此它们位于容器拉伸的右侧。

你只需要添加：.navbar-header {width: 100%;}，在这里，我更新了你的JsFiddle：）

https://jsfiddle.net/DTcHh/16521/

Answer 3

添加此课程

.navbar-header{width:100%}

以下是Demo

Answer 4

<div class="col-md-6"> {{ form_widget(form.codigoActividad, { 'attr': {'class' : 'form-control','style': 'font-size:11px;'} }) }} </div>附加了一个媒体查询，当视口宽度超过768像素时，它会将其浮动到左侧。

.navbar-header

如上所述，给@media (min-width: 768px) .navbar-header { float: left; }宽度100％会照顾它，或者您可以覆盖该媒体查询。

Answer 5

将<ul ...>放在<div class="navbar-header">之后：

<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>

不清楚您想对.hundred和.word做些什么。您可能需要将display:inline-block附加到这两个课程，然后使用padding，并且不需要<h1>。

无法使用navbar-right工作

5 个答案: