css - Bootstrap 内联表单不显示内联

Question

目前正在做的事情的图片: http://i.imgur.com/3o4eJ4s.png

    <div class="container"> 
        <div class="navbar">
             <div class="navbar-inner">
                <div class="nav-collapse pull-right">
                    <div class="pull-left"><a href="./index.php?p=register" class="btn btn-success">Reg&iacute;strate</a></div>
                    <ul class="nav">
                      <li class="divider-vertical"></li>
                      <li class="dropdown">
                        <a class="dropdown-toggle" href="#" data-toggle="dropdown">Con&eacute;ctate&nbsp;<strong class="caret"></strong></a>
                        <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
                            <form name="login" action="login.php" method="post" class="form-inline" style="max-width: none;">
                                <input name="user_name" class="input-medium" type="text" placeholder="Nombre de usuario" />
                                <input name="user_password" class="input-medium" type="password" placeholder="Contrase&ntilde;a" />
                                <button type="submit" class="btn btn-primary">Con&eacute;ctate</button>
                            </form>
                        </div>
                      </li>
                    </ul>
                </div>
            </div>
        </div>

我正在使用 Bootstrap，我遇到的问题是表单水平显示，忽略了类“form-inline”。我尝试了很多方法都没有成功。我将不胜感激。表单位于下拉菜单中，因为我想在用户单击导航栏中的“登录”按钮时放置登录表单。

Answer 1

form 根据其父大小流动，问题是 div 对它来说太小了。

您必须替换默认的 width。设置 width: 430px !important 对我来说已经足够了。

<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;width: 430px !important;">