【发布时间】：2015-04-22 13:22:16
【问题描述】：
我正在编写一个基本 sie 的标题，但我无法理解用我自己的 CSS 覆盖引导 CSS 的正确方法。我添加了表单控件输入和按钮以充当站点搜索，但在定位方面遇到了麻烦。定位似乎总是我遇到的一个问题，因为我总是添加需要我调整其他人定位的功能。无论如何，我为我的标题编写了一些代码，我想连续充当徽标 > 菜单 > 搜索 > 社交按钮。我的 HTML 是：
<!doctype html>
<html>
<head>
<link rel = "stylesheet" href = "css/style_samp2.css">
<link rel = "stylesheet" href = "css/bootstrap.min.css">
<meta charset="utf-8">
<title>Site</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="logo_header_test1.html">
<img alt="My Logo" src="logo.gif">
</a>
</div>
<div class="container">
<ul class = "dropdown-menu-right">
<div class = "top-menu">
<li><a href="About.html">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="#">Portfolio</a></li>
</div>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</nav>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</body>
</html>
CSS：
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.container-fluid {
background-color: #30302f;
height: 90px;
}
.top-menu a{
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
position: relative;
left: 320px;
top: 64px;
}
.top-menu a:hover {
text-decoration: underline;
color: #fff;
}
.container .top-menu li{
display: inline-block;
}
.social{
position: relative;
top: 20px;
left: 900px;
}
.navbar-header a {
background-color: #30302f;
height: 69px;
width: 367px;
position: relative;
left: 120px;
}
Pseudo ::before element
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Pseudo ::after element
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
这是一个小提琴（徽标不起作用，但尺寸正确）：
https://jsfiddle.net/yp1pm3e8/
感谢您提供有关放置 div 的正确方法的任何意见！
【问题讨论】：
-
你需要清理你的小提琴。您的 style_same2.css 文件会将您带到需要登录才能查看的下拉框。我建议取出您的自定义 CSS 并将其添加到 Fiddle 本身。此外，您不需要向 HTML 部分添加任何标题数据（删除文档类型、标题等）
标签： html css twitter-bootstrap twitter-bootstrap-3