使用与搜索表单相关的自定义CSS重写Bootsrap [英] Overriding Bootsrap with custom CSS related to search forms

问题描述

我正在为基本的sie编写头文件，并且无法理解用我自己的CSS覆盖引导CSS的正确方法。我添加了表单控件输入和按钮来充当网站搜索，但是在定位时遇到了麻烦。定位总是似乎是我遇到的问题，因为我总是添加需要我调整其他位置的功能。无论如何，我为我的标题编写了一些代码，我想连续作为徽标>菜单>搜索>社交按钮。我的HTML是：

 <！doctype html> 
< html> 
< head> 
 
< link rel =stylesheethref =css / style_samp2.css> 
< link rel =stylesheethref =css / bootstrap.min.css> 
 
 
< meta charset =utf-8> 
< title>网站< / title> 
< / head> 
 
< body> 
 
< nav class =navbar navbar-default> 
< div class =container-fluid> 
< div class =navbar-header> 
< a class =navbar-brandhref =logo_header_test1.html> 
< img alt =我的标志src =logo.gif> 
< / a> 
< / div> 
 
< div class =container> 
< ul class =dropdown-menu-right> 
< div class =top-menu> 
< li>< a href =About.html>关于< / a>< / li> 
< li>< a href =＃>博客< / a>< / li> 
< li>< a href =resume.html>继续< / a>< / li> 
< li>< a href =＃>投资组合< / a>< / li> 
 
< / div> 
< / ul> 
 
< form class =navbar-form navbar-leftrole =search> 
< div class =form-group> 
< input type =textclass =form-controlplaceholder =Search> 
< / div> 
< button type =submitclass =btn btn-default>提交< / button> 
< / form> 
 
< / div> 
< / div> 
 
< / div> 
 
 
 
 
< / nav> 
 
 
 
< script src =http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.jstype =text / javascript >< /脚本> 
 
< script src =js / scripts.jstype =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：大写; 
职位：亲属; 
 left：320px; 
 top：64px; 
} 
 
 .top-menu a：hover {
 text-decoration：underline; 
颜色：#fff; 
} 
 
 .container .top-menu li {
 display：inline-block; 
} 
 
 .social {
 position：relative; 
 top：20px; 
剩下：900px; 
} 
 
 .navbar-header a {
 background-color：＃30302f; 
 height：69px; 
 width：367px; 
职位：亲属; 
 left：120px; 
} 
 
伪元素::元素之前
：之后，：之前{
 -webkit-box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 box-sizing：border-box; 
} 
伪元素：在元素之后
：之后，：之前{
 -webkit-box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 box-sizing：border-box; 
 
 $ / code> 

这是一个小提琴（该徽标不起作用，但尺寸是正确）：

https://jsfiddle.net/yp1pm3e8/

感谢任何关于定位div的正确方法！

解决方案

查看此页面 http://getbootstrap.com/css/ 并查看引导程序的网格系统。这将帮助你理解行和列。至于你的自定义CSS我同意上面的答案。头部中的引导样式表必须包含您的样式表。

徽标和搜索栏不应该包含在导航标记中。 http://www.w3schools.com/TAgs/tag_nav.asp 检查此页面对于使用nav有一个很好的定义。导航栏只能包裹您的网站导航或其他主要/实用工具网站导航。在这种情况下，这将是你的关于，博客，简历和投资组合。

Bootstrap可以轻松创建流畅的布局。所以你应该小心尝试覆盖代码。根据您提供的代码和您所问的问题，我会尝试包装下面的所有内容。这将把所有的东西放在同一行，并帮助你像你想要的位置。然后，您可以将所有内容都包裹在标签中，并以您想要的样式进行设计请记住，引导程序是一种流畅且响应式的布局。

 < div class =container-fluid> 
< div class =row> 
< div class =col-md-4>徽标标签和代码都是heare< / div> 
< div class =col-md-4>导航和标签转到此处< / div> 
< div class =col-md-4>搜索代码和标签会转到此处< / div> 
< / div> 
< / div> 
  

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

希望这有助于您！
$ b 编辑：好了，所以再次检查你的问题后，在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顶> 
< div class =container> 
 <！ - 品牌和切换分组以获得更好的移动展示效果 - > 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggle collapsed menuIcondata-toggle =collapsedata-target =＃bs-example-navbar-collapse-1> 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =navbar-brandhref =＃> 
< img alt =Brandsrc =http://i.imgur.com/jeJYf95.gifclass =img-responsiveid =brandImage/> 
< / a> 
< / div> 
 
 <！ - 收集导航链接，表单和其他内容以进行切换 - > 
< div class =collapse navbar-collapseid =bs-example-navbar-collapse-1> 
< ul class =nav navbar-nav> 
< li class =dropdown> 
< a href =＃class =dropdown-toggledata-toggle =dropdownrole =buttonaria-expanded =false>关于< span class =caret> ;< /跨度>< / A> 
< ul class =dropdown-menurole =menu> 
< li>< a href =＃>动作< / a>< / li> 
< li>< a href =＃>另一个动作< / a>< / li> 
< li>< a href =＃>其他内容< / a>< / li> 
< li class =divider>< / li> 
< li>< a href =＃>分离式连结< / a>< / li> 
< li class =divider>< / li> 
< li>< a href =＃>另一个分离的连结< / a>< / li> 
< / ul> 
< / li> 
< li class =dropdown> 
< a href =＃class =dropdown-toggledata-toggle =dropdownrole =buttonaria-expanded =false>博客< span class =caret> ;< /跨度>< / A> 
< ul class =dropdown-menurole =menu> 
< li>< a href =＃>动作< / a>< / li> 
< li>< a href =＃>另一个动作< / a>< / li> 
< li>< a href =＃>其他内容< / a>< / li> 
< li class =divider>< / li> 
< li>< a href =＃>分离式连结< / a>< / li> 
< li class =divider>< / li> 
< li>< a href =＃>另一个分离的连结< / a>< / li> 
< / ul> 
< / li> 
< li class =dropdown> 
< a href =＃class =dropdown-toggledata-toggle =dropdownrole =buttonaria-expanded =false>继续< span class =caret> ;< /跨度>< / A> 
< ul class =dropdown-menurole =menu> 
< li>< a href =＃>动作< / a>< / li> 
< li>< a href =＃>另一个动作< / a>< / li> 
< li>< a href =＃>其他内容< / a>< / li> 
< li class =divider>< / li> 
< li>< a href =＃>分离式连结< / a>< / li> 
< li class =divider>< / li> 
< li>< a href =＃>另一个分离的连结< / a>< / li> 
< / ul> 
< / li> 
< li class =dropdown> 
< a href =＃class =dropdown-toggledata-toggle =dropdownrole =buttonaria-expanded =false>投资组合< span class =caret> ;< /跨度>< / A> 
< ul class =dropdown-menurole =menu> 
< li>< a href =＃>动作< / a>< / li> 
< li>< a href =＃>另一个动作< / a>< / li> 
< li>< a href =＃>其他内容< / a>< / li> 
< li class =divider>< / li> 
< li>< a href =＃>分离式连结< / a>< / li> 
< li class =divider>< / li> 
< li>< a href =＃>另一个分离的连结< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
< form class =navbar-form navbar-rightrole =search> 
< div class =form-group> 
< label for =searchclass =sr-only>搜索栏< / label> 
< input type =textname =searchclass =form-controlplaceholder =Search/> 
< / div> 
< button type =submitclass =btn btn-default>提交< / button> 
< / form> 
< / div><！ -  /.navbar-collapse  - > 
< / div><！ -  /.container-fluid  - > 
< / nav> 
  

和css：

  .container {
背景：＃30302f; 
} 
 
 .menuIcon {
背景：rgb（200,200,200）; 
} 
 
 .navbar-brand {
 height：auto; 
} 
 
 #brandImage {
最大宽度：60％; 
} 
 
 @media（max-width：600px）{
 
 .navbar-brand {
 width：95％; 
填充：8px 2.5％; 
} 
 
 #brandImage {
最大宽度：100％; 
} 
} 
 
 @media（min-width：990px​​）和（max-width：1200px）{
 .navbar-brand {
 width ：250像素; 
 
 
 $ / code> 

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

让我知道这是否有帮助！

I am writing the header for a basic sie, and am having trouble grasping the idea of the proper way to override the bootstrap CSS with my own CSS. I added the form-control input and buttom to act as a site search, but am having trouble with positioning. Positioning always seems to be an issue I run into, as I always add features that require me o adjust positioning of others. Anyway, I wrote some code for my header that I want to act as logo > menu > search > social buttons all in a row. My HTML is:

<!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;
}

Here is a fiddle (the logo isn't working, but the dimensions are correct):

https://jsfiddle.net/yp1pm3e8/

Thanks for any kind of input as to the correct way to position the divs!

解决方案

Check out this page http://getbootstrap.com/css/ and view bootstrap's "Grid System". This will help you understand rows and columns. As for your custom css I agree with the above answer. You must have your style sheet after the bootstrap stylesheet in the head.

The logo and the search bar should not be wrapped in a nav tag. http://www.w3schools.com/TAgs/tag_nav.asp Check this page out for a good definition on the use of nav. The nav should only wrap your site navigation or other main/utility site navigation. In this instance it would be your about, blog, resume and portfolio.

Bootstrap makes it easy to create fluid layouts. So you should be careful trying to override the code. Based on the code you provided and the question you are asking I would try wrapping everything like I have below. This will put everything on the same row and help you position like you want. You can then wrap everything in your tags and style how you want. Just remember bootstrap is a fluid and responsive layout.

<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>

I would recommend setting the .img-responsive to your logo to keep it fluid. In js fiddle I noticed there was problems with the logo overlapping your navigation. I think this is because you provided fixed dimensions. Also, you are setting things to position relative when you may not need to. Let me know if you need further explanation.

Hope this helps!

EDIT: okay so after reviewing your question one more time and looking over your new code in jsfiddle I came up with this solution: https://jsfiddle.net/8yufLL4n/embedded/result/

here is link to editable jsFiddle code: https://jsfiddle.net/8yufLL4n/

I used a few resources for this: 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

Here is the 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>

And the 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;
}
}

Notice that I use media queries to style it at different screen sizes. I am not trying to make drastic changes to the bootstrap css. Instead, try adding id or classes to the elements that you need to style (like what I did with menuIcon and brandImage). Try making small changes one at a time to see how it effects the design.

Let me know if this helps!

这篇关于使用与搜索表单相关的自定义CSS重写Bootsrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！