Question

我下载了Bootstrap 3.0.3（点击主页上的“Download Bootstrap”按钮）并使用此代码从下拉列表中创建登录表单。

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" id="register" data-toggle="dropdown">Register <b class="caret"></b></a>
            <div class="dropdown-menu" style="width: 400px">
                <form id="register-form" class="navbar-form navbar-left">
                    <!--(form goes here)-->
                </form>
            </div> <!-- /dropdown-menu -->
        </li> <!-- /dropdown -->
        <!--(here goes another dropdown)-->
    </ul>
</div><!-- /navbar-collapse -->

圆角仅显示在底部，我无法设置出来。过了一会儿，我在这里查了一下，发现我的Bootstrap CSS文件中缺少几行 - 即这些行：

.navbar .nav > li > .dropdown-menu::before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #CCC;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.navbar .nav > li > .dropdown-menu::after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
  border-left: 6px solid transparent;
  content: '';
}

我将这些行添加到第二个CSS中。当然他们让卡通出现在下拉列表的左侧，但我希望它出现在右侧。我假设我的CSS中可能还有一些行丢失了（最近carstrap的caron最近已经过时了吗？）。

我还想纠正顶角没有出现圆角的问题。

提前感谢您的帮助。

屏幕截图：http://i.stack.imgur.com/Us1oC.png

Answer 1

在CSS

中将left更改为right

更改此

 left: 10px;

到此

 right: 10px; /*Adjust the value as per your need*/

Bootstrap 3 - 下拉登录表单，没有插入符号和上部圆角边框

1 个答案: