Fixe Zone de Recherche dans le Bootstrap barre de navigation

J'essaie de comprendre comment faire de la zone de recherche de fixe dans la barre de navigation au lieu de faire partie de la liste déroulante. Le résultat final serait quelque chose de similaire à l'image ci-dessous.

<div class="container-fluid">
    <!-- add header -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

    </div>

    <!-- add menu -->
    <div class="collapse navbar-collapse" id="navbar1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="/">Home</a></li>
          <li><a href="/about.html">About</a></li>
          <li><a href="/services.html">Services</a></li>
        </ul>

        <!-- add search form -->
        <form class="navbar-form navbar-right" role="search">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search this site">
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-default">
                    <span class="glyphicon glyphicon-search"></span>
                    </button>
                </span>
            </div>
        </form>
    </div>
</div>

Voici le code, je suis actuellement en train de travailler sur: http://www.bootply.com/fb311f2zSJ#

Veuillez inclure le plus court de code nécessaires pour reproduire le problème que vous rencontrez dans la question elle-même. Ainsi, n'oubliez pas d'inclure une question claire déclaration. Sa fine et dandy de ce que vous nous racontez ce que vous voulez faire, ce que nous devons savoir est le problème que vous avez et ce que vous aimeriez nous faire à ce sujet.
Mettez juste le formulaire de recherche dans la barre de navigation en-tête et de ne pas s'effondrer jamais
déjà là, dans dream weaver

InformationsquelleAutor Vianne | 2016-08-21

Essayez ceci:

CSS:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

/* CSS used here will be applied after bootstrap.css */
.navbar-header form {
    position: absolute;
    right: 20px;
    max-width: 250px;
}
button.navbar-toggle.pull-left {
    margin-left: 15px;
}
@media only screen and (max-width:768px){
    .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
        border-color: rgba(0,0,0,0);
        margin-top: 0;
        padding-top: 8px;
    }
    .navbar-form {
        padding: 10px 15px;
        margin-top: 8px;
        margin-right: -15px;
        margin-bottom: 8px;
        margin-left: -15px;
        border-top: 0px solid transparent;
        border-bottom: 0px solid transparent;
        -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 0px 0 rgba(255,255,255,.1);
    }
}

HTML:

<nav class="navbar navbar-inverse" role="navigation">

    <div class="container-fluid">
        <!-- add header -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#navbar1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- add search form -->
            <form class="navbar-form navbar-right" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search this site">
                    <span class="input-group-btn">
                        <button type="submit" class="btn btn-default">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
            </form>
        </div>

        <!-- add menu -->
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="nav navbar-nav" style="width:100%">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="/about.html">About</a></li>
                <li><a href="/services.html">Services</a></li>     
            </ul>    
        </div>
    </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

InformationsquelleAutor Omar Faruque

Vous devrez ajouter un autre formulaire de recherche qui va devenir visible sur les appareils mobiles. Vous pouvez définir le style avec votre css pour positionner la barre de recherche correctement.

Voici la mise à jour du code html:

<div class="container-fluid">
<!-- add header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- add the mobile devices search form here -->
<div class="col-xs-10 visible-xs">
<form class="navbar-form navbar-right mobile-search" role="search">
<div class="input-group">
<input class="form-control" placeholder="Search this site" type="text">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
<!-- end of the mobile devices search form section -->
</div>
<!-- add menu -->
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/services.html">Services</a></li>
</ul>
<!-- add search form -->
<form class="navbar-form navbar-right hidden-xs" role="search">
<div class="input-group">
<input class="form-control" placeholder="Search this site" type="text">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>

InformationsquelleAutor oseme_techguy

J'ai fait quelques modifications dans le fichier css par défaut peut cela va vous aider.

<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- add header -->
<div class="navbar-header pull-left">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- add menu -->
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/services.html">Services</a></li>
</ul>
<!-- add search form -->
</div>
<form class="navbar-form navbar-right pull-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search this site">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
</nav>

CSS:

@media (min-width:768px){
.navbar-collapse{ 
float:left
}
}
@media (max-width:767px){
.navbar-form.navbar-right{
border-color: #101010;
width: calc(100% - 30px);
padding: 0;
border: none;
}
.navbar{
border:none;
}
.navbar-collapse{  
background-color: #222;
position: absolute;
top: 50px;
width: 100%;
left:0;
margin:0 !important;
}
}

Voici de travail de démonstration: https://jsfiddle.net/vb8ptav5/

InformationsquelleAutor Mukesh Ram

Vous devez vous connecter pour publier un commentaire.