Question

我正在使用以下网站上的代码：

http://winetourhoneymoon.com/untame.net/tutorials/07phplogin/

我正在使用标头标签中的代码。当我保存代码并在我的本地网站上查看时，我得到的东西看起来就像我附加的屏幕截图，登录在右边的页面上运行。有人有什么想法吗？

非常感谢任何帮助。如果我没有提供足够的细节，请告诉我。

        <div class="navbar navbar-inverse navbar-fixed-top">
            <ul class="nav navbar-nav">
            <li><a href="index.php">Home</a></li>
            <li><a href="">About Us</a></li>
            <li><a href="contact.php">Contact Us</a></li>
            <li><a href="signup.php">Sign Up</a></li>
            </ul><!-- nav -->   
             <div class="nav-collapse collapse">
    <ul class="nav pull-right">
      <li><a href="register.php">Register</a></li>
      <li class="divider-vertical"></li>
      <li class="dropdown">
        <a class="dropdown-toggle" href="#" data-toggle="dropdown">Log In <strong class="caret"></strong></a>
        <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
            <form action="login.php" method="post"> 
                Username:<br /> 
                <input type="text" name="username" value="<?php echo $submitted_username; ?>" /> 
                <br /><br /> 
                Password:<br /> 
                <input type="password" name="password" value="" /> 
                <br /><br /> 
                <input type="submit" class="btn btn-info" value="Login" /> 
            </form> 
        </div>
      </li>
    </ul>
  </div>

Answer 1

对于这种特殊情况，因为您知道下拉列表将始终位于该右侧边缘，只需在下拉菜单div中添加pull-right类：

<div class="dropdown-menu pull-right" style="padding: 15px; padding-bottom: 0px;">

这是jsFiddle example here

下拉登录下降到右侧和溢出页面

1 个答案: