Javascript 下拉按钮在引导中工作不正常。有人能告诉我哪里出了问题吗

我已经编写了一个小的示例代码来测试bootstrap中的下拉按钮，但是有些示例代码显示它似乎没有按预期工作。有人能指出我错在哪里吗

<div class = "col-md-8 col-xs-12">
        <h1>CuB</h1>
    <form class = "col-xs-8 form-horizontal" role = "form">
        <div class = "form-group">
            <label class = "col-sm-2 control-label">Latitude</label>
            <label class = "col-xs-8 control-label">xxx.xxxxx</label>
            <label class = "control-label col-sm-2">degrees</label>
        </div>
        <div class = "form-group">
            <label class = "col-sm-2 control-label">Display Units</label>
            <div class="col-sm-10">
                <button class = "btn navbar-btn btn-danger dropdown-toggle pull-right" data-toggle = "dropdown">DropDown<span class =  "caret"></span></button>
                    <ul class = "dropdown-menu">
                        <li>
                            <a href="#">Facebook</a>
                        </li>
                        <li>
                            <a href="#">Twitter</a>
                        </li>
                        <li>
                            <a href="#">Google+</a>
                        </li>
                        <li>
                            <a href="#">LinkedIn</a>
                        </li>
                    </ul>
            </div><!-- /.col-lg-6 -->
        </div>

        <div class = "form-group pager">
            <div class = "col-sm-3 col-xs-12">
                <button type = "button" class = "btn btn-success col-xs-12">Use</button>
            </div>
            </div>
            <div class = "col-sm-3 col-xs-12">
                <button type = "button" class = "btn btn-warning col-xs-12">Back</button>
            </div>
        </div>
    </form>
</div>

幼兽
纬度
xxx.xxxxx
度
显示单元
下拉列表










使用
返回

您的问题来自pull right类，该类在按钮上应用浮点：right

您可以在菜单上应用此类来修复此问题：

 <div class="col-sm-10 dropdown">
     <button class = "btn navbar-btn btn-danger dropdown-toggle pull-right" data-toggle = "dropdown">DropDown<span class =  "caret"></span></button>
          <ul class = "dropdown-menu pull-right">
              <li>
                  <a href="#">Facebook</a>
              </li>
              <li>
                   <a href="#">Twitter</a>
               </li>
               <li>
                   <a href="#">Google+</a>
               </li>
               <li>
                   <a href="#">LinkedIn</a>
               </li>
           </ul>
      </div><!-- /.col-lg-6 -->
 </div>

下拉列表

---

我检查了你的代码。我注意到两个问题

col-sm-10下拉列表后缺少btn组div

您必须将pull right类应用于父级，而不是按钮

这是一个小提琴演示

下面是HTML的结构

<div class = "col-md-8 col-xs-12">
        <h1>CuB</h1>
        <form class = "col-xs-8 form-horizontal" role = "form">
            <div class = "form-group">
                <label class = "col-sm-2 control-label">Latitude</label>
                <label class = "col-xs-8 control-label">xxx.xxxxx</label>
                <label class = "control-label col-sm-2">degrees</label>
            </div>
            <div class = "form-group">
                <label class = "col-sm-2 control-label">Display Units</label>
                <div class="col-sm-10">
                    <div class="btn-group pull-right">
                        <button data-toggle="dropdown" class="btn btn-danger dropdown-toggle" type="button">
                            Dropdown <span class="caret"></span>
                        </button>
                        <ul role="menu" class="dropdown-menu">
                            <li>
                                <a href="#">Facebook</a>
                            </li>
                            <li>
                                <a href="#">Twitter</a>
                            </li>
                            <li>
                                <a href="#">Google+</a>
                            </li>
                            <li>
                                <a href="#">LinkedIn</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class = "form-group pager">
                <div class = "col-sm-3 col-xs-12">
                    <button type = "button" class = "btn btn-success col-xs-12">
                        Use
                    </button>
                </div>
            </div>
            <div class = "col-sm-3 col-xs-12">
                <button type = "button" class = "btn btn-warning col-xs-12">
                    Back
                </button>
            </div>
        </form>
    </div>

幼兽
纬度
xxx.xxxxx
度
显示单元
下拉列表










使用
返回

当我单击下拉按钮时，什么都没有发生。这是因为你还需要包含jQuery。那就奇怪了，它对我有效，只是没有正确对齐，太左了，无法具体说明。明白了。我只是包括bootstrap.css，而忘记了包括bootstrap.js。哎呀。。无论如何谢谢你们的帮助。对不起/。。。但是我怎样才能结束这个问题呢谢谢。。这有助于对齐。