CSS Bootstrap导航栏中心搜索栏，在整个宽度崩溃 [英] CSS Bootstrap navbar- center search bar that takes the whole width on collapse

问题描述

我有一个包含3个元素的引导程序v.3导航栏。我想要均匀对齐元素，以便搜索栏位于导航栏中央。当它崩溃时，它需要完整的widht。但努力做到这一点。

这是它的html：

 < nav class =navbar navbar-transparent navbar-fixed-toprole =navigation> 
 
< div class =container> 
 <！ - 品牌和切换分组以获得更好的移动展示效果 - > 
< div class =col-lg-4 navbar-header> 
< button type =buttonclass =navbar-toggledata-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> 
< img src =assets / img / logo.pngalt =logo> 
< / div> 
 
 <！ - 收集导航链接，表单和其他内容以进行切换 - > 
< div class =collapse navbar-collapseid =bs-example-navbar-collapse-1> 
< form class =navbar-form navbar-left navbar-search-form activerole =search> 
< div class =form-group> 
< input type =textvalue =class =form-controlplaceholder =Search ...> 
< / div> 
< / form> 
< ul class =nav navbar-nav> 
< li class =active> 
< a href =javascript：void（0）;>< i class =fa fa-search>< / i>< / a> 
< / li> 
< / ul> 
< ul class =nav navbar-nav navbar-right> 
< li><按钮href =＃gsdkclass =btn btn-round btn-default>登录< / button>< / li> 
< / ul> 
 
< / div><！ -  /.navbar-collapse  - > 
< / div><！ -  /.container-fluid  - > 
< / nav> 
  

我试着做一个 fiddle 为它，但它没有变好，但希望那里的代码可以给出一些想法。

解决方案

您可以通过一些简单的调整来实现同样的功能，而无需使用flex和CSS3属性。

检查演示 这里

试试这个

HTML：

 < nav class =navbar navbar-透明navbar-fixed-top角色=导航> 
 
< div class =container> 
 <！ - 品牌和切换分组以获得更好的移动展示效果 - > 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggledata-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> 
 
< img class =logosrc =// placehold.it/50x50alt =logo> 
< / div> 
 
 <！ - 收集导航链接，表单和其他内容以进行切换 - > 
< div class =collapse navbar-collapseid =bs-example-navbar-collapse-1> 
< form class =navbar-form navbar-search-form activerole =search> 
< div class =form-group> 
< div class =input-group> 
< input type =textclass =form-controlplaceholder =Search for ...> 
< span class =input-group-btn> 
< button class =btn btn-defaulttype =button>< i class =fa fa-search>< / i>< / button> 
< / span> 
< / div> 
< / div> 
< / form> 
 
< ul class =nav navbar-nav navbar-right> 
< li><按钮href =＃gsdkclass =btn btn-round btn-default>登录< / button>< / li> 
< / ul> 
 
< / div> 
<！ -  /.navbar-collapse  - > 
< / div> 
<！ -  /.container-fluid  - > 
< / nav> 
  

CSS：

  body {
 background-color：#ddd; 
} 
 
 .navbar {
 border：1px solid #ccc; 
} 
 
 .navbar-toggle .icon-bar {
 background-color：＃333; 
} 
 
 .navbar-nav> li {
 line-height：50px; 
职位：亲属; 
} 
 
 .logo，.navbar-nav> li> .btn {
 margin：0 15px; 
} 
 
 @media（min-width：767px）{
 .navbar-search-form {
 position：absolute; 
剩下：0; 
 right：0; 
 margin：auto; 
宽度：100％; 
 float：none; 
 text-align：center; 
 padding：8px 0; 
} 
} 
  

I have a bootstrap v.3 navbar with 3 elements in it. I would like to align elements evenly so that the search bar is centred in the navbar. And when it collapses that it takes the full widht. But struggling to do that.

This is the html for it:

      <nav class="navbar navbar-transparent navbar-fixed-top" role="navigation">

        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="col-lg-4 navbar-header">
            <button type="button" class="navbar-toggle" 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>
            <img src="assets/img/logo.png" alt="logo">
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-left navbar-search-form active" role="search">
               <div class="form-group">
                  <input type="text" value="" class="form-control" placeholder="Search...">
               </div>
            </form>
                    <ul class="nav navbar-nav">
              <li class="active">
                  <a href="javascript:void(0);"><i class="fa fa-search"></i></a>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><button href="#gsdk" class="btn btn-round btn-default">Sign in</button></li>
            </ul>

          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>

I tried to make a fiddle for it, but it didn't turn out good, but hopefully the code there can give some idea.

解决方案

You can achieve the same without flex and CSS3 properties with some simple tweaks.

Check Demo HERE

Try this

HTML:

<nav class="navbar navbar-transparent navbar-fixed-top" role="navigation">

  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" 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>

      <img class="logo" src="//placehold.it/50x50" alt="logo">
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <form class="navbar-form navbar-search-form active" role="search">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for...">
            <span class="input-group-btn">
        <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
      </span>
          </div>
        </div>
      </form>

      <ul class="nav navbar-nav navbar-right">
        <li><button href="#gsdk" class="btn btn-round btn-default">Sign in</button></li>
      </ul>

    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

CSS:

body {
  background-color: #ddd;
}

.navbar {
  border: 1px solid #ccc;
}

.navbar-toggle .icon-bar {
  background-color: #333;
}

.navbar-nav > li {
  line-height: 50px;
  position: relative;
}

.logo, .navbar-nav > li > .btn {
  margin: 0 15px;
}

@media (min-width: 767px) {
  .navbar-search-form {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    float: none;
    text-align: center;
    padding: 8px 0;
  }
}

这篇关于CSS Bootstrap导航栏中心搜索栏，在整个宽度崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！