如何使用引导程序将 <div> 显示为响应式下拉列表 [关闭]答案

【问题标题】：How to show <div> as responsive drop down list using bootstrap [closed]如何使用引导程序将 <div> 显示为响应式下拉列表 [关闭]
【发布时间】：2018-02-28 10:58:49
【问题描述】：

show <div> list as responsive drop down list under second textbox from the give JsFiddle using bootstrap

JsFiddle

我有两个带有 Col-xs-6 的文本框。我想要像这张图片一样的输出

【问题讨论】：

您能详细解释一下您想要什么吗，您的下拉选项中的文本框是否用于自动搜索？
您的问题的详细信息质量非常低：/
@Maher 不要说那样的话，请尝试提供有用和有启发性的 cmets。
你的问题很不清楚，也很宽泛。我建议您阅读How to Ask 页面，并选择tour。我相信你会发现它们很有用。这些页面中的提示和解释可以帮助您写出其他人可以回答的问题。
得到了解决方案。参考这个jsfiddle.net/3etbtfwL/347

标签： angularjs twitter-bootstrap css styles angular-ui-bootstrap

【解决方案1】：

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">orange</a></li>
      <li><a href="#">bnana</a></li>
      <li><a href="#">lemon</a></li>
      <li><a href="#">apple</a></li>
    </ul>
  </div>
</div>

【讨论】：

不走运。我详细更新了问题

【解决方案2】：

input {
width: 100%;
}

然后它将采用与列表项相同的宽度。

【讨论】：

不走运。我详细更新了问题。

【解决方案3】：

在这个示例中，我们 2 下拉了引导框架和 angularjs，您可以通过点击或默认值更改它们。

var app = angular.module('httpApp', []);

app.controller('httpAppCtrlr', function($scope, $http) {
  $scope.items = ["orange", "banana", "lemon", "apple"]
  $scope.selected = $scope.items[0];


  $scope.onChange = function(item) {
    $scope.selected = item;
  }

  //2
  $scope.selected2 = false;

  $scope.onChange2 = function(item) {
    $scope.selected2 = item;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container" ng-app='httpApp' ng-controller='httpAppCtrlr'>

  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
    {{selected}}
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li ng-repeat="item in items" ng-click="onChange(item)"><a href="#">{{item}}</a></li>
    </ul>
  </div>
  <hr>
  <div class="dropdown">
    <button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown">
    {{selected2 ? selected2 : 'select once...'}}  
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li ng-repeat="item in items" ng-click="onChange2(item)"><a href="#">{{item}}</a></li>
    </ul>
    <a ng-hide="!selected2" ng-click="selected2 = false">remove</a>
  </div>
</div>

【讨论】：

不走运。我详细更新了问题