Question

我尝试制作自定义导航栏，因为标准导航栏不是我想要的。它看起来太随意，所以我尝试而不是使用导航栏，图像。

我无法让他们连续排列4张图片。

我看到有两种类型，一种是通过CSS定义一个类，另一种是直接在index.html中。这两种方法有什么不同之处吗？

帮助将是超级明确的。我尝试了30个网站的部分代码，但似乎没有什么工作，我想知道我做错了什么。

问候女王

＆＃13;

.navbar {
max-width:960px;
text-align:center;
}

.home {
position:relative;
display: inline-block;
float:left;
padding:10px;
}

.search {
position:relative;
display: inline-block;
pading:10px;
}
.logo {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
}

.partner {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;

＆＃13;

<body>
<div class="navbar">
        <div class="navbar-special">
            <ul class="nav">
<li class="home"><a href="#"><img src="http://i.imgur.com/GryNQfZ.png" /></a></li>
<li class="search"><a href="#"><img src="http://i.imgur.com/NfURGQL.png" /></a></li>
<li class="logo"><a href="#"><img src="http://i.imgur.com/sIwbaop.png" /></a></li>
<li class="partner"><a href="#"><img src="http://i.imgur.com/Ry9hIzC.png" /></a></li>
        </div> <!-- div closing navbar -->
    </div><!-- div closing navbar -->
</body>

＆＃13;

http://jsfiddle.net/n32koz7q/1/

Answer 1

由于它适用于样式，因此有一些注意事项会使index.html或外部样式表中的样式不同。

将样式放在外部样式表中（其他一切都保持不变）......

- 创建一个新的HTTP请求，并在index.html页面之后加载外部样式表（假设此页面请求样式表）。

- 更改应用样式的顺序。例如，如果你有。

index.html：

    <html>
      <head>
       <link rel="stylesheet" type="text/css" href="mystyle.css">
      </head>
    <body>
      hello world!
    </body>
   </html>
   <style>
    .body {color:black;}
   </style>

和mystyle.css：

body {
color: white;
}

正文将具有color:black的css属性，因为该样式最后加载。 You can read about this here。

还有一些其他差异，但这些差异可能是您当前用例特有的。

关于你原来的问题：这是一个更新的小提琴：

http://jsfiddle.net/n32koz7q/2/

你有很多不必要的造型。我会从这里开始，然后建立起来。基本上，在这种情况下，您将用于获取内联元素的最基本的CSS将如下所示：

.navbar {
max-width:960px;
text-align:center;
}

li {
    display:inline-block;
    padding: 10px;
}

基本上，您只希望这些li元素内联。

祝你好运！

Answer 2

只需添加以下代码：

.navbar-default {
 background-color:red;
}

这应该让你去。

带图像的Bootstrap自定义导航栏

2 个答案: