Question

我有一个使用Twitter Bootstrap和Rails 3.2的简单NavBar

<header class="navbar navbar-fixed-top">
 <div class="navbar-inner">
 <div class="container">
  <%= link_to logo, root_path, :class=>"logo1" %>
  <nav>
  <ul class="nav pull-right">
   <% if signed_in? %>
    <li class="hova"><%= link_to "#" %></li>
    <li class="hova"><%= link_to "#" %></li>
    <li class="hova"><%= link_to "#" %></li>
    <li class="hova"><%= link_to "#" %></li>
    <li id="fat-menu" class="dropdown">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i><b class="caret"></b>
     </a>

 </header>

截至目前，徽标位于居中工具栏的左侧，链接和下拉插入符号位于右侧，每侧没有间距。

如何向两者添加一些填充/边距（将徽标向左移动约5px，向右移动约5 px的内容，以便牺牲中心空白而不是移动内容。

例如，

.navbar .container {
 width: 960px;
 margin-left:10px;
 }

..适用于左侧。但是我怎样才能在同一时间实现同样的权利呢？道歉，而不是前端设计师。

谢谢。

Answer 1

将徽标放在范围

中

<span class="logo"><%= link_to logo, root_path, :class=>"logo1" %></span>

然后使用CSS作为 -

.logo{
    margin: 0 0 0 -5px;
}

.dropdown{
    margin: 0 -5px 0 0;
}

Answer 2

试试这个

<img src="logo.png" style="margin-left:-5px;" />

Css居中而不影响每一方

2 个答案: