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

Question

我正在为一个基本的 sie 编写 header，但我无法理解用我自己的 [=25= 覆盖 bootstrap CSS 的正确方法的想法].我添加了 form-control 输入和按钮作为站点搜索，但在定位时遇到了问题。定位似乎一直是我运行的一个问题，因为我总是添加需要我调整其他人定位的功能。无论如何，我为我的 header 编写了一些代码，我想将其用作连续的徽标 > 菜单 > 搜索 > 社交按钮。我的 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;
}

这是一个 fiddle（徽标无效，但尺寸正确）：

https://jsfiddle.net/yp1pm3e8/

感谢您就正确定位 div 的方式提出意见！

Answer 1

您必须在 bootstrap 定义之后包含您的新样式设置，这样 bootstrap css 定义将被覆盖。所以首先需要包含默认 bootstrap css 然后是你的新样式定义文件，这样设置就会被新设置覆盖。

Answer 2

查看此页面 http://getbootstrap.com/css/ 并查看 bootstrap 的 "Grid System"。这将帮助您理解行和列。至于你的习惯 css 我同意上面的回答。您必须在头部的 bootstrap 样式 sheet 之后有您的样式 sheet。

徽标和搜索栏不应包裹在导航标签中。 http://www.w3schools.com/TAgs/tag_nav.asp 查看此页面以获得有关导航使用的良好定义。导航应该只包含您的站点导航或其他 main/utility 站点导航。在这种情况下，它将是您的简介、博客、简历和作品集。

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-responsive 设置为您的徽标以保持流畅。在 js fiddle 中，我注意到徽标与导航重叠时存在问题。我认为这是因为您提供了固定尺寸。此外，当您可能不需要时，您正在将事物设置为相对位置。如果您需要进一步解释，请告诉我。

希望对您有所帮助！

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

这里是 link 可编辑的 jsFiddle 代码：https://jsfiddle.net/8yufLL4n/

我为此使用了一些资源：http://getbootstrap.com/components/#navbar-default I copied the code over from bootstrap and I made slight alterations to fit what I think you are trying to do. Now on large screens and normal tablet view the logo, navigation and search form all sit in the same row. As you adjust the screen size this changes like in all fluid and responsive designs. To get the dropdown working you will have to add javascript. This link should help: 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

Overriding Bootsrap with custom CSS related to search forms

html

css

twitter-bootstrap

twitter-bootstrap-3