【问题标题】:bootstrap, input text with dropdown button引导,使用下拉按钮输入文本
【发布时间】:2015-10-26 12:58:02
【问题描述】:

我正在尝试使用按钮下拉菜单来获取此输入文本。但是,当我单击按钮时没有任何功能。

http://getbootstrap.com/components/#input-groups-buttons-dropdowns 跟随“带下拉菜单的按钮”

这里有一个代码:https://jsfiddle.net/jjpg9ofy/1/

    <div class="input-group">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action<span class="caret"></span>
            </button>
               <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a></li>
              </ul>
         </div>
         <input type="text" class="form-control" aria-label="...">
     </div>

我的进口。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker-standalone.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js" rel="stylesheet">

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

<!--  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
-->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/lang/en-gb.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>

【问题讨论】:

    标签: twitter-bootstrap


    【解决方案1】:

    您的小提琴缺少 jQuery,如果您添加它,它可以正常工作:

    https://jsfiddle.net/jjpg9ofy/2/

    将它添加到小提琴中:

    expand Frameworks & Extensions in the top left corner
    select a version of jQuery, e.g. 1.10.1.
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-03-16
      • 2015-05-25
      • 1970-01-01
      • 2021-05-27
      • 2015-04-06
      • 2021-02-10
      • 1970-01-01
      • 2014-08-24
      相关资源
      最近更新 更多