Question

我正在为一个基本的sie编写标题，并且无法掌握使用我自己的CSS覆盖bootstrap CSS的正确方法的想法。我添加了表单控件输入和buttom作为站点搜索，但我在定位方面遇到了麻烦。定位总是似乎是我遇到的问题，因为我总是添加需要我调整其他人定位的功能。无论如何，我为我的标题编写了一些代码，我希望将其作为徽标＆gt;菜单＆gt;搜索＆gt;社交按钮全部连续。我的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的正确方法的任何输入！

Answer 1

您必须在引导程序定义之后包含新样式设置，以便覆盖引导程序CSS定义。因此，首先需要包含默认的bootstrap css以及之后的新样式definiton文件，以便新设置覆盖设置。

Answer 2

查看此页面http://getbootstrap.com/css/并查看bootstrap的“网格系统”。这有助于您了解行和列。至于你的自定义CSS我同意上面的答案。您必须在头部的引导样式表之后放置样式表。

徽标和搜索栏不应包含在导航代码中。 http://www.w3schools.com/TAgs/tag_nav.asp查看此页面以获得有关nav使用的良好定义。导航应仅包装您的站点导航或其他主/实用程序站点导航。在这种情况下，它将是你的博客，简历和投资组合。

Bootstrap可以轻松创建流畅的布局。因此，您应该小心尝试覆盖代码。根据您提供的代码和您要问的问题，我会尝试包装下面的所有内容。这会将所有内容放在同一行，并帮助您按照自己的意愿定位。然后，您可以将标签中的所有内容包装起来并根据需要设置样式记住bootstrap是一种流畅且响应迅速的布局。

<div class="container-fluid">
  <div class="row">
     <div class="col-md-4">Logo tags and code goes heare</div>
     <div class="col-md-4">Navigation and tags goes here</div>
     <div class="col-md-4">Search code and tags goes here</div>
  </div>
</div>

我建议将.img-response设置为对您的徽标保持流畅。在js小提琴中，我注意到徽标与导航重叠有问题。我认为这是因为你提供了固定的尺寸。此外，当您可能不需要时，您将设置相对位置。如果您需要进一步解释，请告诉我。

希望这有帮助！

编辑好的，所以在再次审核您的问题并查看jsfiddle中的新代码后，我想出了这个解决方案：https://jsfiddle.net/8yufLL4n/embedded/result/

这里是指向可编辑的jsFiddle代码的链接：https://jsfiddle.net/8yufLL4n/

我使用了一些资源：http://getbootstrap.com/components/#navbar-default我从bootstrap中复制了代码，然后我做了一些改动，以适应我认为你想要做的事情。现在，在大屏幕和普通平板电脑上，徽标，导航和搜索表单都位于同一行。当您调整屏幕尺寸时，其变化就像所有流畅和响应式设计一样。要获得下拉列表，您必须添加javascript。此链接应有助于：http://getbootstrap.com/javascript/#dropdowns

这是html：

    <nav class="navbar navbar-default navbar-fixed-top">
     <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
     <button type="button" class="navbar-toggle collapsed menuIcon" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">
      <img alt="Brand" src="http://i.imgur.com/jeJYf95.gif" class="img-responsive" id="brandImage" />
  </a>
</div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">About <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Blog <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Resume <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Portfolio <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
    </ul>
     <form class="navbar-form navbar-right" role="search">
    <div class="form-group">
        <label for="search" class="sr-only">Search Bar</label>
        <input type="text" name="search" class="form-control" placeholder="Search" />
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
  </nav>

和css：

.container {
   background:#30302f;
}

.menuIcon {
    background:rgb(200,200,200);
}

.navbar-brand {
   height:auto;
}

#brandImage {
   max-width:60%;
}

@media (max-width:600px) {

.navbar-brand {
width:95%;
padding:8px 2.5%;
}

#brandImage {
max-width:100%;
}
}

@media (min-width:990px) and (max-width:1200px) {
.navbar-brand {
width:250px;
}
}

请注意，我使用媒体查询以不同的屏幕尺寸设置样式。我并不是想对bootstrap css做出重大改变。相反，尝试将id或类添加到您需要设置样式的元素（就像我使用menuIcon和brandImage所做的那样）。尝试一次做一个小的更改，看看它如何影响设计。

请告诉我这是否有帮助！

Answer 3

这个非常简单的伙伴你应该将自定义css文件放在bootstap css文件下面。像这样的东西：

<!doctype html>
<html>
<head>


<link rel = "stylesheet" href = "css/bootstrap.min.css"> <!-- first place bootstrap -->
<link rel = "stylesheet" href = "css/style_samp2.css"> <!-- place of custom css file to override your bootstrap css file 

</head>

<body>
<!-- your body -->
</body>
    
</html>

这样你可以覆盖bootstrap css文件

使用与搜索表单相关的自定义CSS覆盖Bootstrap

3 个答案: