Comment positionner un deuxième objet dans la barre de navigation

Il y a beaucoup de html ici, mais il devrait sembler très familier à quiconque ayant un site d'amorçage.Comment positionner un deuxième objet dans la barre de navigation

<body> 
<section class="container-fluid"> 
    <div class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <div class="container-fluid"> 
       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </a> 
       <a class="brand" href="/">Home</a> 
       <div class="nav-collapse"> 
        <ul class="nav"> 
         <li><a href="#">One</a></li> 
         <li><a href="#">Two</a></li> 
         <li><a href="#">Three</a></li> 
        </ul> 
        <ul class="pull-right nav"> 
         <li class="dropdown"> 
          <a href="##" class="navbar-link dropdown-toggle" data-toggle="dropdown"> 
           Your name here 
          </a> 
          <ul class="dropdown-menu"> 
           <li><a href="/Profile/Profile.cfm">Profile</a></li> 
           <li><a href="/?logout">Logout</a></li> 
          </ul> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
    <form> 
     <textarea name="Comment"></textarea> 
     <div class="form-actions"> 
      <input type="submit" name="Save" value="Save"> 
     </div> 
    </form> 
</section> 
</body>

j'ai pu placer le bouton « Enregistrer » en haut partie à droite de l'écran avec cette css:

.form-actions { 
    position:absolute; 
    right:0; 
    top:25px; 
}

Ce que je voudrais faire est de lui donner un fixe attribut supérieur. En d'autres termes, pour ne pas faire défiler l'écran lorsque l'utilisateur fait défiler vers le bas.

Je peux changer le html, le CSS, tout ce qui est nécessaire pour atteindre cet objectif. Par exemple, en ce moment, "Votre nom ici" est sur le côté droit de la barre de navigation, mais c'était sur un coup de tête - ce n'est pas une exigence.

Source

2013-01-11 Phillip Senn

Je ne vois pas très bien à quoi ressemblera la dernière page, mais est-ce un début?
http://jsfiddle.net/panchroma/R5Q3W/

Le bit important est que la forme est ce que vous voulez « spy'on, donc j'enveloppa dans un contenant div comme ceci:

<div class="formWrapper" data-spy="affix" data-offset-top="10"> 
<form> ...... </form> 
</div><!-- close formWrapper div -->

(données-offset supérieure est la la distance, la page doit faire défiler avant l'action affixe coups de pied dans)

Puis j'ai ajouté ce CSS pour définir ce que vous voulez arriver à ce div quand il est apposé

.formWrapper.affix{ 
right:0; 
top:25px; 
width:100%; 
}

Espérons que cela aide!

Source

2013-01-11 23:03:24

Wow! C'est très intéressant! Laissez-moi vérifier ça! –

Comment positionner un deuxième objet dans la barre de navigation

Répondre

Questions connexes