Center Formular in Dropdown Bootstrap?

Question

Ich habe ein Drop-Down im Bootstrap, aber ich weiß nicht, wie ich ein Formular zentriere, das ich darin habe.

Hier ist mein Code;

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <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="#">Testing, 123</a> 
     <div class="nav-collapse"> 
     <ul class="nav"> 
      <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
      <div class="dropdown-menu"> 
       <form accept-charset="UTF-8" action="/sessions" method="post"> 
       <fieldset class='textbox login'> 
        <label id='js-username'> 
        <span>Username</span> 
        <input autocomplete="on" id="username" name="username" type="text" size="20px"/> 
        </label> 
        <label id='password'> 
        <span>Password</span> 
        <input id="userpassword" name="userpassword" type="password" /> 
        </label> 
       </fieldset> 
       <fieldset class='subchk'> 
        <input name="commit" type="submit" value="Log In" /> 
       </fieldset> 
       </form> 
      </div> 
      </li> 
     </ul> 
     <form class="navbar-search pull-right" action=""> 
      <input type="text" class="search-query span2" placeholder="Search"> 
     </form> 
     </div><!-- /.nav-collapse --> 
    </div><!-- /.container --> 
    </div><!-- /.navbar-inner --> 
</div><!-- /.navbar --> 

Ich habe die Breite des Drop-Down in der CSS angepasst meine Form paßt, ich kann einfach nicht herausfinden, wie in der Drop-Down-Formular zu zentrieren.

Answer 1

Erstellen Sie einfach eine Klasse mit einer gewissen Polsterung und fügen Sie es zu Ihrem Formular-Tag, wie so sein:

CSS

.wrap { 
    padding:15px; 
} 

HTML

<form class="wrap" accept-charset="UTF-8" action="/sessions" method="post">...</form> 

Demo: http://jsfiddle.net/a52UY/

Answer 2

Verwendung Center-Tag könnte es Hilfe für Sie

<center> </center> 


    <div class="dropdown-menu"> 
     <center> 
      <form accept-charset="UTF-8" action="/sessions" method="post"> 

     ....... 

      </form> 
     </center> 

Answer 3

Ohne Ihre CSS ist es schwer zu sehen, um sicher zu sagen, dass dies funktionieren wird, aber versuchen Sie dies:

.dropdown-menu form { 
width: *insert form width here in pixels*; 
margin: 0 auto; 
} 

Diese Antwort geht davon aus, dass die li mit der Klasse Dropdown größer ist horizontal als deine Form, und du versuchst, die Form darin zu zentrieren. Um etwas horizontal mit dieser Methode zu zentrieren, muss es eine feste Breite haben, und die Breite muss kleiner sein als das Elternelement (in diesem Fall das li mit dem Klassen-Dropdown).

Edited hinzufügen: Ich wusste nicht, wie alt diese Frage bis war, nachdem ich es beantwortet ..