Question

我想在内联块中显示导航栏菜单项和搜索按钮表单，因为它显示在两行中。

这是我的代码

HTML

                 <div class="col-md-4 col-md-offset-3">
        <form action="" class="search-form">
            <div class="form-group has-feedback">
                <label for="search" class="sr-only">Search</label>
                <input type="text" class="form-control" name="search" id="search" placeholder="search">
                <span class="glyphicon glyphicon-search form-control-feedback"></span>
            </div>
        </form>
    </div>

                <div class="col-sm-6 col-xs-8">

                <ul class="nav navbar-nav navbar-right">
                   <li><a href="#">My Account</a></li>
                   <li><a href="#">Sign In</a></li>
                   <li><a href="#">Create Account</a></li>
                   <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</a></li>
               </ul>

                   </div>
                </div>

        </div><!--/.container-->
    </div><!--/.top-bar-->

CSS

 #header .search{
  display: inline-block;
}

.navbar>.container .navbar-brand{
 margin-left: 0;
 }

.top-bar {
 padding: 10px 0;
 background: #191919;
  border-bottom: 1px solid #222;
 line-height: 28px;
 }

.search-form .form-group {
 float: right !important;
 transition: all 0.35s, border-radius 0s;
 width: 32px;
 height: 32px;
 background-color: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  border-radius: 25px;
  border: 1px solid #ccc;
}

   .search-form .form-group input.form-control {
    padding-right: 20px;
    border: 0 none;
   background: transparent;
   box-shadow: none;
   display:block;
   }

  .search-form .form-group input.form-control::-webkit-input-placeholder {
   display: none;
   }

  .search-form .form-group input.form-control:-moz-placeholder {
 /* Firefox 18- */
 display: none;
  }
.search-form .form-group input.form-control::-moz-placeholder {
 /* Firefox 19+ */
 display: none;
 }
.search-form .form-group input.form-control:-ms-input-placeholder {
 display: none;
 }
 .search-form .form-group:hover,
 .search-form .form-group.hover {
 width: 100%;
  border-radius: 4px 25px 25px 4px;
}
   .search-form .form-group span.form-control-feedback {
    position: absolute;
    top: -1px;
   right: -2px;
    z-index: 2;
    display: block;
    width: 34px;
     height: 34px;
    line-height: 34px;
    text-align: center;
    color: #3596e0;
     left: initial;
    font-size: 14px;
   }

以下是jsfiddle

Answer 1

在搜索表单展开时，将搜索栏放在菜单旁边意味着覆盖它。所以我可能会破坏你的设计，特别是改变.col-sm-6的宽度：

.col-sm-6{
    width:100% !important;
}
.nav.navbar-nav > li{
    display:inline-block;
    float:none;
    vertical-align: top;

    transition: all 0.2s ease;
}

#search-form{
    display:inline-block
}

.search-form .form-group input{
    transition: width 0.25s ease 0.1s;
    display:none;
}

.search-form .form-group{
    overflow:hidden;
}
.search-form .form-group:hover{
    overflow:visible;
}
.search-form .form-group:hover input{
    display:inline;
    position: absolute;
    width: 50vw;
    right: 0;
    background: white;
    border-radius: 25px;
}

http://jsfiddle.net/pLvp7ru0/3/

我认为您应该为搜索栏添加更好的行为，您必须留在它上面以保持显示。请参阅MDN上的那个。

如何显示导航栏菜单项和搜索按钮形式内联块

1 个答案: